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.