Skip to content

Instantly share code, notes, and snippets.

@shmup
Forked from thomd/semantic-layout.html
Created October 29, 2020 00:09
Show Gist options
  • Save shmup/dac38193efb165da2196d0e86373ca7c to your computer and use it in GitHub Desktop.
Save shmup/dac38193efb165da2196d0e86373ca7c to your computer and use it in GitHub Desktop.
Standard HTML5 Semantic Layout
<!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>

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>.
+-----------------------------------+
| header |
+-----------------------------------+
| nav |
+---------------------+-------------+
| | |
| section | aside |
| | |
| | |
| +-----------------+ | |
| | article | | |
| +-----------------+ | |
| | article | | |
| +-----------------+ | |
+---------------------+-------------+
| footer |
+-----------------------------------+
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment