HTML Tutorial / Divide a Page with Semantic Elements
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?
headerintroduces a page or a section. It can contain a site name, heading, or navigation.navgroups major navigation links. A group does not neednavmerely because it contains links.maincontains the primary content unique to the page. A document normally has one visiblemainregion.articlesuits a self-contained post or story.sectiondivides content by subject and should usually have a heading that identifies its subject.asidecontains supporting information indirectly related to the main content.footerholds 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 / Divide a Page with Semantic Elements
Learn when to use header, nav, main, article, section, aside, and footer, then build a complete page whose regions and in-page links work together.
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 / 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 / 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 / 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 / Text Semantics: Emphasis, Quotations, Abbreviations, and Code
Learn when to use HTML em, strong, q, blockquote, abbr, code, and kbd. Examples show how each element conveys meaning rather than just changing the appearance of text.
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 / 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 / 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.
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.