FredSRocha/html5-template.html

## html5-template.html
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Your Website</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material+Icons|Roboto:100,300,400,700'>
</head>
<body>
	<header role="banner">
		<nav id="main-nav" aria-label="Main Navigation">
			<ul>
				<li>Your Menu</li>
      </ul>
    </nav>
  </header>
  <main>
    <!-- Section (e.g.: Blog Website) -->
    <section role="article">
      <article role="contentinfo" aria-label="Article about Guitars">
        <header>
          <h2>What kind of Axeman are you?</h2>
          <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments.</a></p>
        </header>
        <p>Are you a Fender guy or a Gibson gal? Well if it’s good enough for Jimi, it’s good enough for me!</p>
        <footer>Article Footer.</footer>
      </article>
      <article role="contentinfo" aria-label="Article about Your Content">
        <header>
          <h2>Article Title</h2>
          <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments.</a></p>
        </header>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <footer>
          <p>Posted on <time datetime="2018-09-23 12:17">May 16</time> by <a href="#">Lisa</a>.</p>
        </footer>
      </article>
    </section>
    <!-- Article (e.g.: One Page Website) -->
    <article aria-label="Article about Your Website">
      <section role="contentinfo" aria-label="Section Title 1">
        <h2>Section Title 1</h2>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <h3>What kind of guitar did Robbie Basho play??</h3>
        <p> Well, I really like John Fahey and Leo Kottke [...]</p>
      </section>
      <section role="contentinfo" aria-label="Section Title 2">
        <h2>Section Title 2</h2>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </section>
      <section role="contentinfo" aria-label="Section Title 3">
        <h2>Section Title 3</h2>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <h3>What kind of guitar did Robbie Basho play??</h3>
        <p> Well, I really like John Fahey and Leo Kottke [...]</p>
      </section>
    </article>
  </main>
  <!-- Aside -->
	<aside role="note | complementary">
		<h2>About Section</h2>
		<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</aside>
  <!-- Footer -->
	<footer aria-label="Footer">
		<p>Copyright 2009 Your name.</p>
	</footer>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Your Website</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material+Icons\|Roboto:100,300,400,700'>
	</head>
	<body>
	<header role="banner">
	<nav id="main-nav" aria-label="Main Navigation">
	<ul>
	<li>Your Menu</li>
	</ul>
	</nav>
	</header>
	<main>
	<!-- Section (e.g.: Blog Website) -->
	<section role="article">
	<article role="contentinfo" aria-label="Article about Guitars">
	<header>
	<h2>What kind of Axeman are you?</h2>
	<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments.</a></p>
	</header>
	<p>Are you a Fender guy or a Gibson gal? Well if it’s good enough for Jimi, it’s good enough for me!</p>
	<footer>Article Footer.</footer>
	</article>
	<article role="contentinfo" aria-label="Article about Your Content">
	<header>
	<h2>Article Title</h2>
	<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments.</a></p>
	</header>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<footer>
	<p>Posted on <time datetime="2018-09-23 12:17">May 16</time> by <a href="#">Lisa</a>.</p>
	</footer>
	</article>
	</section>
	<!-- Article (e.g.: One Page Website) -->
	<article aria-label="Article about Your Website">
	<section role="contentinfo" aria-label="Section Title 1">
	<h2>Section Title 1</h2>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<h3>What kind of guitar did Robbie Basho play??</h3>
	<p> Well, I really like John Fahey and Leo Kottke [...]</p>
	</section>
	<section role="contentinfo" aria-label="Section Title 2">
	<h2>Section Title 2</h2>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	</section>
	<section role="contentinfo" aria-label="Section Title 3">
	<h2>Section Title 3</h2>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<h3>What kind of guitar did Robbie Basho play??</h3>
	<p> Well, I really like John Fahey and Leo Kottke [...]</p>
	</section>
	</article>
	</main>
	<!-- Aside -->
	<aside role="note \| complementary">
	<h2>About Section</h2>
	<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</aside>
	<!-- Footer -->
	<footer aria-label="Footer">
	<p>Copyright 2009 Your name.</p>
	</footer>
	</body>
	</html>