HTML
Partial HTML
Learn to design reusable HTML partials.
What is a partial?
A partial is a small, self-contained HTML chunk used more than once on a page. A card, a menu item or a comment box can be a partial. The goal is to stop copy-pasting the same markup and instead produce it from one source you reuse everywhere.
On a blog, every article card shares the same shape: image, title, summary and a link. Write that card once as a partial and reuse it on the home page, the category page and the author page. When something must change, you fix one place.
How is a partial written?
When you write a partial, think from the centre of its own job, not from the page around it. Build the content with semantic tags and expose it through a tidy root element (say <article> or <li>). That way the partial drops cleanly into lists, main flow or grids.
Keep the partial self-contained: it must not depend on an outer id or class. The links and text inside belong to the partial. Then moving it to another page breaks nothing.
Combining partials
Partials do not stand alone; they sit side by side in a page skeleton. A home page might be a <header> partial, a few article card partials and a <footer> partial. Each partial owns its root element and joins the larger frame through that root.
Consistency across partials matters too: all cards should share the same <article> root, the same heading hierarchy and the same link pattern. Then the page looks and reads tidy.
Exercise Write an article card partial
Write an article card partial inside body: an <article> root, holding a non-empty <h3> (title), a non-empty <p> (summary) and an <a> with a non-empty href (read-more link). It must not depend on any outer id; all links stay inside the article.
Show example solution
<body>
<article>
<h3>Eight Plants for the Garden</h3>
<p>Eight tough plants you can grow on your balcony.</p>
<a href="/posts/garden-plants">Read more</a>
</article>
</body>
Test yourself
-
Complete the partial definition
<p>A partial is a small HTML chunk used ____ on a page.</p>
Show answer
<p>A partial is a small HTML chunk used again and again on a page.</p>
-
Which one makes a good partial?
- Being self-contained
- Relying on an outer id
- Being used on only one page
- Holding only CSS
Show answer
Being self-contained — Correct. A good partial is self-contained and works without external dependencies.
-
Match each piece to whether it is a partial
- Article card
- Repeating card
- Menu item
- Used inside a list
- Comment box
- Appears more than once
- Single main heading
- Appears once
Next lesson: Data attributes
