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.

Format a Semantic HTML Page Structure

Semantic HTML uses elements that describe meaning rather than just presentation, improving accessibility for screen readers and SEO for search engines. This example shows a complete page skeleton with all major semantic landmarks. The formatter applies consistent indentation to the nested structure. Use this as a starting template for new pages to ensure correct document outline and ARIA landmarks.

Example

<!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>&copy; 2024 My Site</p></footer>
</body>
</html>

[ open in HTML Formatter → ]

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

Format HTML Meta Tags

Meta tags in the <head> control how search engines index your page and how it ap...

Format an HTML Form with Validation

HTML5 provides built-in browser validation through attributes like required, typ...

Format an HTML CSS Grid Layout

CSS Grid enables two-dimensional layouts with clean, semantic HTML. This example...