Code for HTML5/CSS Layout

Replacing HTML4 (top) with HTML5 (bottom)

Replacing this:

HTML5 example

<!DOCTYPE html>
<html>

     <head>
     <title>A sample HTML5 document</title>
     </head>

  <body>
      <header>
         <h1>Sample document</h1>
      </header>

      <section>
          <article>
          <h2>Subheading</h2>
          This is some of the content of the document.
          </article>

          <article>
          <h2>Subheading 2</h2>
          This is some more content, in a different section of the document.
          </article>

      </section>

      <footer>
     <a href="mailto:me@opera.com">Chris Mills</a> &copy; 2009
      </footer>

  </body>
</html>

Nothing has changed that radically—the elements are a bit different, but they reflect common semantics that you find on many websites that developers tend to create using <div> elements, for example <div id=”header”>, which is replaced with <header> in HTML5. You’ll also notice that the DOCTYPE is much simpler than the ones you saw earlier.

Try it yourself!
You can start experimenting with these new elements already, even though browsers don’t yet officially support them. All you have to do is write a rule in your CSS to make them all display as block elements. Try this out!

For HTML 5 to work on all browsers, you must add the following property to your CSS file.

article, section, aside, hgroup, nav, header, footer, figure, figcaption
{ display: block;
}

For HTML 5 to work with older versions of IE, you need to add this to the script below to the <head> of your HTML file.

Download the HTML5 shiv and create a “js” folder at the same level as your index.html. Place the html5shiv.js and html5shiv-printshiv.js files located in the “dist” inside your “js” folder.

        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <![endif]-->

One thought on “Code for HTML5/CSS Layout”

  1. scripts, themes says:

    We are a bunch of volunteers and opening a new scheme in our community. Your site provided us with helpful info to work on. You’ve done a formidable task and our entire neighborhood shall be thankful to you.

Leave a Reply

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