Monday, July 18, 2011

HTML 5

HTML5 resources
HTML5 Specification — HTML5 specification from the w3c
HTML5 Doctor — helping you implement HTML5 today
15 Useful Resources to Get Clued Up on HTML5 — exactly as it says, from line25.com
Dive Into HTML5 — wonderful looking site from Mark Pilgrim which seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards
HTML5 Gallery — a showcase of sites using HTML5 markup — see how others use it
101 Best HTML5 sites — view and vote on the 101 best HTML5 sites
Get Ready for HTML5 — some suggestions on HTML5 from A List apart
HTML 5 Tag Reference — a reference to HTML5 tags from the always excellent w3schools
HTML5 Showcase — showcasing the best html5 sites in the world
HTML5 Websites — worldwide showcase gallery for HTML5 websites 


================================================================================

All HTML documents must start with a <DOCTYPE>, and HTML5 documents are no different. Except in one way: simplification. No longer need you frantically worry about what guff you need to put in the <DOCTYPE> tag, there is only one: html. And so the <DOCTYPE> for a HTML5 document looks thusly:
<!DOCTYPE html>
How simple is that? I won't even talk about it anymore as there's no need (but you can read more about the doctype in the spec. itself - should you really want to).
Moving on, next is the <html> tag. As with most HTML documents, you can simply use this on its own but I suggest you add the language attribute, but it's up to you. At any rate, it's the same syntax as HTML so nothing has changed here. So for completeness, here it is spelled out for you:
<html lang="en">
Next up is the <head> tag. The tag itself remains the same, with nothing new to report. However some of the standard contents within it have changed.
Firstly, the <script> tag. You know how you currently use type="text/javascript" attribute within this tag when defining JavaScript? Well in HTML5 you don't need to anymore as type defaults to text/javascript. Of course if you are defining code that is not JavaScript then you will have to override the default.
The <style> tag goes pretty much the same way. Since there is currently only one type of <style>, this now defaults to text/css thus allowing you to not bother adding it in.
The only other change here is with regards to the <meta> tag with the charset attribute. Again it's a reduced code tag and you can simply add the charset and not have to worry about anything else. So instead of typing something like:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
you can simply type:
<meta charset=utf-8>
Note that this is a void element and should not have an end tag. This is also where the W3C's validator falls over with HTML5 at the moment, since if you set this in your document, it reports that no character encoding has been found. Note: this has been fixed as of the 3rd March 2010. Many thanks to Hayden for bringing this to my attention.
Within the <body> things are pretty much the same, the use of <h1>, <h2>, <div>, <span>,<p>, <ul>, <a> and the like can continue and are all part of HTML5. However, there are a number of new tags that you can use for structuring your HTML5 document, and I will briefly go into some of these now.
  • <nav> — this is used to enclose navigational blocks, a section of a document that links to other documents or to parts within the document itself
  • <header> — represents the header of a section. Can be used more than once in a document.
  • <hgroup> — a special form of heading that can contain either a single or a group of <h1><h6> elements and nothing else.
  • <article> — this represents a section of content that forms an independent part of a document or site (and is intended to be independently distributable or reusable) for example a magazine article or a blog entry.
  • <section> — represents a section of a document, typically with a title or a heading. This doesn't replace the <div> element, and is only appropriate if there is a natural heading for it.
  • <footer> — this element represents the footer of a section, which has probably been started with a <header> tag, but doesn't have to.
As always, the issue of browser compatibility needs to be mentioned. Most browsers will allow you to name any tags that you like, so whilst some browsers may not strictly support the new tags, they will happily use them, although you will have to provide a default block display style for the structure ones. Adding the following CSS styling will do the trick:
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
Of course, as usual, Internet Explorer presents a problem as it is unable to see these elements by default and they need to be added. This can be achieved with the aid of some JavaScript, which creates the elements for IE:
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
If JavaScript isn't enabled, then the document will be displayed as if the HTML5 specific CSS styling hadn't been applied to the document.
That'll for for now, although there are other tags that can be used, but these are the main ones that you will use when putting together a simple HTML5 document.


The results

So what are we left with? Enough HTML5 knowledge to create a simple,
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8>
    <title>A simple HTML5 page layout</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
      </script>
    <![endif]-->
    <style>
      body { margin:100px; }
      article, aside, figure, footer, header, hgroup, menu, nav, section { 
        display:block;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="simple-html5-document.html">home1</a>
      <a href="simple-html5-document.html">home2</a>
    </nav>
    <header>
      <h1>A simple HTML5 document</h1>
    </header>
    <article>
      <hgroup>
        <h1>Article 1 heading</h1>
        <h2>Article 1 sub-heading</h2>
      </hgroup>
      <section>
        <h3>Section 1 heading</h3>
      </section>
    </article>
    <article>
      <header>
        <h1>Article 2 heading</h1>
      </header>
      <section>
        <h2>Section 1 heading</h2>
      </section>
    </article>
    <footer>
      <p>This is the footer</p>
    </footer>
  </body> 
</html>

No comments:

Post a Comment