Skip to content

Instantly share code, notes, and snippets.

@jenniferlynparsons

jenniferlynparsons/semantic-layout.html

Forked from thomd/semantic-layout.html
Last active November 1, 2017 21:50
Show Gist options
  • Save jenniferlynparsons/4d1b87f6e16ffb6111252ba3f25ededc to your computer and use it in GitHub Desktop.
Save jenniferlynparsons/4d1b87f6e16ffb6111252ba3f25ededc to your computer and use it in GitHub Desktop.
Download ZIP
Standard HTML5 Semantic Layout
Raw
semantic-layout.html
<!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>
Raw
semantic-layout.md

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>.
  3. <main> has been excluded as it is not officially part of the HTML specifications. However, it is useful for ARIA purposes and permitted in that context. If it was used, it would most likely wrap the <section> and <aside> elements.
Raw
semantic-layout.txt
+-----------------------------------+
| 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