Format a Semantic HTML Page Structure
Semantic HTML is the practice of choosing HTML elements based on the meaning they convey rather than their default visual appearance. Where a non-semantic approach uses div elements for everything and relies entirely on CSS classes to communicate purpose, semantic HTML uses elements like header, nav, main, article, aside, and footer that tell browsers, search engines, and assistive technologies exactly what role each section plays in the page structure. This example shows a complete page skeleton with all the major semantic landmarks. The header element wraps the site-wide navigation. The main element contains the primary content — every page should have exactly one main element, which screen reader users navigate directly to via keyboard shortcut. The article element wraps self-contained content that could be distributed independently, like a blog post or news story. The aside element wraps content tangentially related to the surrounding content, such as related links or pull quotes. The footer element closes the document. The header element inside article demonstrates that sectioning elements can be nested: the outer header is the site header, while the inner article > header is the article's own heading section containing the h1 and a time element with a machine-readable datetime attribute. Accessibility benefits are significant: screen reader users can navigate between landmarks using keyboard shortcuts, jumping directly to main to skip navigation, or jumping to nav to access site links. JAWS, NVDA, and VoiceOver all use these landmarks. Without semantic HTML, users must tab through every navigation link on every page before reaching the actual content. SEO benefits: search engines understand the document structure from semantic elements. Content inside main and article is weighted more heavily than content inside generic div elements. The h1 heading inside article provides the primary topic signal for the page. Google's crawlers explicitly support semantic landmarks in understanding page structure. Common mistakes to avoid: using multiple h1 elements (each section should have its own heading hierarchy starting at h2), using article for non-self-contained content (use section instead), and omitting the lang attribute on the html element (required for screen readers to select the correct pronunciation profile). Tips: validate your document outline by checking that headings form a logical hierarchy (h1 > h2 > h3 with no levels skipped) and that semantic landmark elements match the visual structure users expect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Article Page</title>
</head>
<body>
<header><nav><a href="/">Home</a></nav></header>
<main>
<article>
<header><h1>Article Title</h1><time datetime="2024-01-15">Jan 15, 2024</time></header>
<p>Article content goes here.</p>
</article>
<aside><h2>Related</h2><ul><li><a href="/post-2">Post 2</a></li></ul></aside>
</main>
<footer><p>© 2024 My Site</p></footer>
</body>
</html>FAQ
- Why use semantic HTML over div elements?
- Semantic elements give browsers, search engines, and assistive technologies information about the role of each section. Screen readers use landmarks like main and nav to let users jump between sections.
- What is the document outline in HTML5?
- The document outline is the hierarchy of headings and sectioning elements (article, section, aside, nav) that defines the page structure for assistive technologies and SEO.
- Is aside for sidebars only?
- aside is for content tangentially related to the surrounding content. This includes sidebars, pull quotes, and related links, but also inline asides within an article.
Related Examples
The meta tags inside a page's head element are invisible to visitors but critica...
Format an HTML Form with ValidationHTML5's built-in form validation attributes provide instant client-side feedback...
Format an HTML CSS Grid LayoutCSS Grid is the modern two-dimensional layout system that has transformed how de...