HTML Tutorial / Divide a Page with Semantic Elements

HTML Tutorial

Semantic HTML elements describe what each part of a page does. Use nav for major navigation, main for the page's primary content, and article for a self-contained piece of content. These roles remain meaningful even when the visual layout changes.

What does each region element mean?

header introduces a page or a section. It can contain a site name, heading, or navigation.
nav groups major navigation links. A group does not need nav merely because it contains links.
main contains the primary content unique to the page. A document normally has one visible main region.
article suits a self-contained post or story. section divides content by subject and should usually have a heading that identifies its subject.
aside contains supporting information indirectly related to the main content. footer holds concluding information for a page or section.

These elements do not position themselves on the screen. Use aside because the content is supplementary, not because you want a sidebar; use CSS to determine its position. Likewise, semantic markup alone does not guarantee accessibility or better search rankings. The actual content, headings, and reading order must match the elements' roles.

Build a complete page with semantic regions

The following example is a complete HTML document. Its page navigation links to regions in the same file, so you can save and run the example without creating another page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Plants for Spring | Small Garden</title>
</head>
<body>
  <header>
    <p>Small Garden</p>
    <nav aria-label="On this page">
      <a href="#article">Read the article</a>
      <a href="#sunlight">Sunlight needs</a>
    </nav>
  </header>

  <main>
    <article id="article">
      <h1>Plants to Grow in Spring</h1>
      <section id="sunlight">
        <h2>Sunlight needs</h2>
        <p>Different plants need different amounts of sunlight.</p>
      </section>
    </article>
    <aside>
      <p>Check the last frost date for your area before planting.</p>
    </aside>
  </main>

  <footer>
    <p>Small Garden guide</p>
  </footer>
</body>
</html>

Save the code as index.html and open it in a browser. The site name, navigation, article, supporting note, and footer appear roughly from top to bottom. Selecting “Sunlight needs” moves to the section because href="#sunlight" matches id="sunlight". If you want the note beside the article, add a CSS layout rather than changing the meaning of the HTML. The h1 inside the code is the example document's heading, not another heading in this tutorial post.

When should you use section or article?

A blog post can stand alone and is a good candidate for article. Within that post, subjects such as “What you need” and “Steps” can each form a section. A wrapper used only for a border or background color does not need a semantic role; a div may be more appropriate. You also do not need to wrap every heading and paragraph in a section when their hierarchy is already clear.

header and footer can belong to an individual article as well as to the whole page. A list of independently understandable news items may contain one article per item. Decide from the content's role, not the element's name or its default appearance. See the MDN HTML element reference for element definitions.

Check the document structure

Read the headings, menu, and main content in document order, even if their positions on the screen look fine. Avoid multiple visible main regions, untitled section wrappers with no real subject, and aside used solely to force a side position. A meaningful structure should still make sense before you add CSS.

HTML Tutorial

HTML Tutorial / Links: Paths, Page Fragments, and Email

Create HTML links with absolute or relative URLs, jump to a document fragment, and add email, new-tab, or download links. Learn what to verify before publishing.

HTML Tutorial / Syntax

Learn the essential rules of HTML syntax, including elements, tags, attributes, void elements, comments, nesting, and the structure of a complete HTML document.

HTML Tutorial / Images: img, Alt Text, and Dimensions

Add an image with HTML img, write useful alternative text, and set width and height correctly. A downloadable example helps you test file paths and sizing.

HTML Tutorial / When to Use div and span

Understand the structural difference between div and span, style only the content you need, and choose semantic elements when they better describe the content.

HTML Tutorial / Accessible Tables: caption, scope, and Spanning Cells

Make table headings and data relationships clear with caption, th, and scope, and learn when colspan or rowspan makes a table harder to read.

HTML Tutorial / Basic Structure of an HTML Document

Learn the roles of doctype, html, head, and body, then save your first HTML file and open it in a browser. Includes a complete example, a diagram, and fixes for common filename, refresh, and encoding problems.

HTML Tutorial / What Is HTML and What Does It Do on a Web Page?

HTML gives web content structure and meaning. Learn how it differs from CSS and JavaScript, see how basic markup appears in a browser, and make your first HTML file.

HTML Tutorial / Table Basics: table, tr, th, and td

Build a basic HTML data table with rows and header or data cells, then organize its headings and body without using tables for page layout.

HTML Tutorial / Lists: ul, ol, dl, and Nested Lists

Choose the right HTML list for ordered items, unordered items, and name–description pairs. Try a complete example, custom numbering, and correctly nested lists.

HTML Tutorial / Responsive Images: srcset, sizes, and picture

Offer image resolutions with srcset and sizes, and switch crops with picture. Downloadable files let you test the examples in a browser.