Semantic Elements

HTML & CSS · 8 entries

Header & Footer

syntax

<header>...</header>
<footer>...</footer>

example

<header>
  <h1>TechBlog</h1>
  <nav>
    <a href="/articles">Articles</a>
    <a href="/about">About</a>
  </nav>
</header>

<footer>
  <p>&copy; 2026 TechBlog. All rights reserved.</p>
</footer>

Note header and footer can be used for the entire page or within an article/section element. A page can have multiple headers and footers in different contexts.

page headersite footerheader elementfooter elementbanner

<main> Primary Content

syntax

<main>...</main>

example

<body>
  <header>...</header>
  <main>
    <h1>Dashboard</h1>
    <section>...</section>
  </main>
  <footer>...</footer>
</body>

Note There must be only one visible main element per page. It should not be nested inside header, footer, nav, article, or aside. Skip-navigation links typically target main.

main contentprimary contentmain elementpage content

Section & Article

syntax

<section>...</section>
<article>...</article>

example

<main>
  <section>
    <h2>Latest Articles</h2>
    <article>
      <h3>Understanding Flexbox</h3>
      <p>A practical guide to flexible layouts...</p>
    </article>
    <article>
      <h3>Grid Layout Patterns</h3>
      <p>Common patterns for CSS Grid...</p>
    </article>
  </section>
</main>

Note An article is a self-contained piece of content that could be independently distributed (blog post, comment, product card). A section is a thematic grouping of content. Both should generally include a heading.

section elementarticle elementcontent sectionblog postsemantic grouping

<aside> Sidebar Content

syntax

<aside>...</aside>

example

<main>
  <article>
    <h2>Web Performance Guide</h2>
    <p>Core Web Vitals measure real-world user experience...</p>
    <aside>
      <h3>Related Resources</h3>
      <ul>
        <li><a href="/caching">Caching Strategies</a></li>
        <li><a href="/images">Image Optimization</a></li>
      </ul>
    </aside>
  </article>
</main>

Note aside represents content tangentially related to its parent. When used at the page level it acts as a sidebar. Inside an article, it represents a pullquote or supplementary info.

sidebarasiderelated contentside content

Details & Summary (Disclosure)

syntax

<details>
  <summary>Visible title</summary>
  Hidden content
</details>

example

<details>
  <summary>How do I reset my password?</summary>
  <p>Go to the login page and click "Forgot Password". Enter your email address and we will send you a reset link within 5 minutes.</p>
</details>

<details open>
  <summary>System Requirements</summary>
  <ul>
    <li>64-bit operating system</li>
    <li>4 GB RAM minimum</li>
  </ul>
</details>

Note This creates a native collapsible section with no JavaScript needed. The open attribute shows the content expanded by default. Style the summary's marker with ::marker or list-style.

accordioncollapsibletoggle contentexpand collapsefaqdisclosure

<dialog> Modal

syntax

<dialog id="myDialog">
  Content
  <button>Close</button>
</dialog>

example

<dialog id="confirmDialog">
  <h2>Confirm Deletion</h2>
  <p>This will permanently remove the item. Continue?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<!-- Open with: document.getElementById('confirmDialog').showModal() -->

Note Use showModal() to open with a backdrop that traps focus (accessible). Use show() for a non-modal popup. The form method="dialog" approach closes the dialog and sets its returnValue to the button's value.

modaldialogpopupconfirm dialogoverlay

<template> Reusable Fragment

syntax

<template id="tmpl">
  <!-- inert markup -->
</template>

example

<template id="card-template">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

<!-- Clone in JS:
const tmpl = document.getElementById('card-template');
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
document.body.appendChild(clone);
-->

Note Content inside template is not rendered, not visible, and not queried by selectors. It serves as a blueprint for JavaScript-generated elements. Clone its content with cloneNode(true).

templatereusable htmlclone elementhtml template

<time> Machine-Readable Dates

syntax

<time datetime="YYYY-MM-DD">display text</time>

example

<p>Published on <time datetime="2026-03-15">March 15, 2026</time></p>
<p>Event starts at <time datetime="2026-04-10T09:00">9:00 AM, April 10</time></p>

Note The datetime attribute provides a machine-readable format for search engines and tools, while the visible text can use any human-friendly format.

date elementtime elementdatetimemachine readable date