Skip to content

Instantly share code, notes, and snippets.

@nathansmith

nathansmith/semantic_html_page.html

Last active April 20, 2017 17:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nathansmith/0b46e5a76ccb20af9de063f7c3f58d5b to your computer and use it in GitHub Desktop.
Save nathansmith/0b46e5a76ccb20af9de063f7c3f58d5b to your computer and use it in GitHub Desktop.
Download ZIP
Example of how I would mark up a "blog" page.
Raw
semantic_html_page.html
<body>
<!--
Site header, logo, etc.
-->
<header role="banner">
<h1>
…
</h1>
</header>
<!--
Site navigation.
-->
<nav role="navigation">
<ul>
<li>
<a>
…
</a>
</li>
</ul>
</nav>
<!--
Site content.
-->
<main role="main">
<!--
Primary article.
-->
<article role="article">
<h2>
…
</h2>
<p>
…
</p>
<h3>
…
</h3>
<p>
…
</p>
</article>
<!--
Supplemental info:
- Author bio.
- Other article links.
- etc.
-->
<aside role="complementary">
…
</aside>
</main>
<!--
Site copyright, etc.
-->
<footer role="contentinfo">
…
</footer>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment