Skip to content

Instantly share code, notes, and snippets.

@data-enhanced
Last active August 31, 2024 20:27
Show Gist options
  • Save data-enhanced/7190172 to your computer and use it in GitHub Desktop.
Save data-enhanced/7190172 to your computer and use it in GitHub Desktop.
A Pen by David Cochran.

HTML5 Markup Template - Basic

A very basic starter template with fundamental HTML5 markup -- only the basics.

Based on HTML5 Bones | http://html5bones.com

<!DOCTYPE html>
<!-- Based on HTML5 Bones | http://html5bones.com -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="description" content="">
<!-- Mobile-friendly viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style sheet link -->
<link href="css/main.css" rel="stylesheet" media="all">
</head>
<body>
<header role="banner">
<a class="brand">Site Title or Logo</a>
<nav role="navigation">
<ul class="navbar">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</nav>
</header>
<main role="main">
<h1>Page Heading</h1>
<p>Use the HTML5 <code>main</code> element to wrap the central content of your page.</p>
<h2>Page sub-heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam, sem vitae tincidunt lobortis, nibh tellus faucibus elit, sed imperdiet enim mauris eget felis. Donec a varius sapien, at mattis nunc.</p>
<h2>Sub-heading</h2>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<h2>Sub-heading</h2>
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
</main><!-- End primary page content -->
<aside role="complementary">
<h3>Secondary page content</h3>
<p>Use the <code>aside</code> element if you need to include content that is not central to the focus of the page or is clearly of secondary importance.</p>
</aside>
<footer role="contentinfo">
<div>Page footer content</div>
<small>Copyright &copy; <time datetime="2013">2013</time></small>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment