Skip to content

Instantly share code, notes, and snippets.

@dimayakovlev

dimayakovlev/semantic-layout.html

Forked from thomd/semantic-layout.html
Last active October 18, 2018 14:56
Show Gist options
  • Save dimayakovlev/30d6a038cc64f29d06e8ed324c19cc03 to your computer and use it in GitHub Desktop.
Save dimayakovlev/30d6a038cc64f29d06e8ed324c19cc03 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>
<h1>Header</h1>
<h2>Subheader</h2>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first section of the first article.
</section>
<section>
This is the second section of the first article.
</section>
<footer>
This is footer of the first article
</footer>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This is the second article.
</section>
<footer>
This is footer of the second article
</footer>
</article>
</main>
<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>.
Raw
semantic-layout.txt
+-----------------------------------+
| header |
+-----------------------------------+
| nav |
+---------------------+-------------+
| | |
| main | aside |
| | |
| | |
| +-----------------+ | |
| | article | | |
| +-----------------+ | |
| | article | | |
| +-----------------+ | |
+---------------------+-------------+
| footer |
+-----------------------------------+
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment