Document Structure

Semantic Article

Sections Give Content Meaning

A short article page uses semantic containers so the rendered page and accessibility tree have meaningful regions.

Program

Semantic HTML chooses elements for meaning first. The browser still renders ordinary boxes, but the document tree carries richer structure.

semantic_article.html
Visuals: captured from real browser rendering
<header>Site Notes</header>
<main>
  <article>
    <h1>Trail Report</h1>
    <p>North path is open.</p>
  </article>
</main>
<footer>Updated 09:00</footer>

  1. Create the page header.

    A Site Notes header appears at the top of the page.
    The header introduces the page region.

  2. Open the main content landmark.

    The page shows a header and an empty main content area.
    The main element reserves the primary content region.

  3. Start a self-contained article.

    An article card appears inside the main region.
    The article groups content that belongs together.

  4. Add the article heading.

    The article card now has a Trail Report heading.
    The heading labels the article for readers and assistive tools.

  5. Add the article body text.

    The article contains a heading and a short report sentence.
    The paragraph carries the article content.

  6. Add update metadata in the footer.

    The page has header, article content, and an Updated 09:00 footer.
    The footer completes the semantic page regions.
landmark A landmark element marks an important page region such as header, main, or footer.
article An article is a self-contained piece of content inside the page.