andibra
7/21/2017 - 9:43 PM

Standard HTML5 Semantic Layout

Standard HTML5 Semantic Layout

semantic-layout.txt
content_copyfile_download
  +-----------------------------------+
  |               header              |
  +-----------------------------------+
  |                 nav               |
  +---------------------+-------------+
  |                     |             |
  |       section       |    aside    |
  |                     |             |
  |                     |             |
  | +-----------------+ |             |
  | |     article     | |             |
  | +-----------------+ |             |
  | |     article     | |             |
  | +-----------------+ |             |
  +---------------------+-------------+
  |               footer              |
  +-----------------------------------+
semantic-layout.md
content_copyfile_download
  • Rendered
  • Source

notes

  1. You may omit the <header> and it's decendants if it's only a sole headline and replace it with <h1>.
  2. In this example the navigation <nav> is a page specific navigation, hence after the page header <header>. If the <nav> is a global navigation, it might also be before the first page header <header>.
semantic-layout.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="stylesheets/main.css" rel="stylesheet" />
</head>
<body>
    <header>
        <hgroup>
            <h1>Header</h1>
            <h2>Subheader</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85" 
                src="http://domain.tld/path/to/image.jpg" 
                alt="foobar" />
            <figcaption>Foobar</figcaption>
        </figure>
    </aside>
    <footer>Footer</footer>
</body>
</html>