Summary - Component skeleton

Write a component skeleton with all templating techniques.

Bring the templating techniques together

In this group you learned five ideas: server-side and client-side rendering share HTML as the target; partials handle repeating chunks; data-* carries behaviour data; id and data-* form hydration hooks; <noscript> carries fallback content.

Now bring them together in one component skeleton. First build a semantic root and a partial shape; then add hooks with id and data-*; finally drop a <noscript> fallback. That order yields a solid base for both server-side and client-side code.

Exercise Write a component skeleton

Write a comment card skeleton inside body: an <article> partial with data-id="12", holding a non-empty <h3>, a non-empty <p> and an <a> with data-action="reply" and a non-empty href. After the article put a <noscript> tag with an <a> link inside that has a non-empty href (text 'Read comments elsewhere'). Both links should go to the /posts/12 path.

Show example solution

<body>
  <article data-id="12">
    <h3>Garden Notes</h3>
    <p>The first tomatoes are ripe; harvest time this week.</p>
    <a href="/posts/12" data-action="reply">Reply</a>
  </article>
  <noscript>
    <a href="/posts/12">Read comments elsewhere</a>
  </noscript>
</body>

Test yourself

Match each technique to where it lives

partial

Repeating card pattern
data-*

Carries behaviour data
id

Picks a single hook point
noscript

JavaScript-free fallback

Complete the component skeleton

<article data-id="7">
  <h3>Title</h3>
  <p>Summary</p>
</article>
<____>
  <a href="/posts/7">Read article</a>
</noscript>

Show answer

<article data-id="7">
  <h3>Title</h3>
  <p>Summary</p>
</article>
<noscript>
  <a href="/posts/7">Read article</a>
</noscript>

Which combination gives a sturdy component skeleton?
- Only div and span
- Only inline styles
- Partial + id + data-* + noscript
- Only script tags
Show answer

Partial + id + data-* + noscript — Correct. Partial shape, id/data-* hooks and a noscript fallback together make a sturdy skeleton.

Next lesson: Project: Dashboard widget

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies