HTML5 Page Structure snippets

HTML5 Page Structure snippets

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>

<body>
<header>
  <nav>
    <ul>
      <li>Your menu</li>
    </ul>
  </nav>
</header>
<section>
  <article>
    <header>
      <h2>page title</h2>
      <p>Posted on
        <time datetime="2015-02-04T16:31:24+02:00">February 2th 2015</time>
        by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
    </header>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </article>
  <article>
    <header>
      <h2>page title</h2>
      <p>Posted on
        <time datetime="2015-02-04T16:31:24+02:00">February 2th 2015</time>
        by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
    </header>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </article>
  <article>
    <header>
      <h2>page title</h2>
      <p>Posted on
        <time datetime="2015-02-04T16:31:24+02:00">February 2th 2015</time>
        by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
    </header>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </article>
  <article>
    <header>
      <h2>page title</h2>
      <p>Posted on
        <time datetime="2015-02-04T16:31:24+02:00">February 2th 2015</time>
        by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
    </header>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </article>
</section>
<aside>
  <h2>About section</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</aside>
<footer>
  <p>Copyright 2015 Your name</p>
</footer>
</body>
</html>

Tags: Please Add some related keywords separate by comma


About Admin

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Leave a Reply

Your email address will not be published. Required fields are marked *