Semantic Tags

Header Tag

The header tag is used in place of a header DIV, and can be used to represent the header of a page, section or article.

                
<div id="header">
    <h1>Page Header</h1>
    <ol id="nav">
        <li><a href="section1.html">Section 1</a></li>
        <li><a href="section2.html">Section 2</a></li>
        <li><a href="section3.html">Section 3</a></li>
    </ol>
</div>
                
            

Can now be marked up as:

                
<header>
    <h1>Page Header</h1>
    <ol id="nav">
        <li><a href="section1.html">Section 1</a></li>
        <li><a href="section2.html">Section 2</a></li>
        <li><a href="section3.html">Section 3</a></li>
    </ol>
</header>
                
            

Hgroup Tag

Hgroup allows us to group numbered heading elements together, to facilitate subheadings and a more flexible document outline.

                
<div class="heading">
    <h2>The Main Heading</h2>
    <p class="subheading">With a Subheading</p>
</div>
                
            

Can now be marked up as:

                
<hgroup>
    <h1>The Main Heading</h1>
    <h2 class="subheading">With a Subheading</h2>
</hgroup>
                
            

More Semantic Tags

This is just a couple of examples of the new tags that are available in HTML5. For more, see http://dev.w3.org/html5/spec/Overview.html#semantics.

APIs

Drag 'n' Drop

Elements can easily be made draggable - the DOM provides a suite of methods and properties that can be used to interact with draggable elements very simply.

                
(function () {
    var draggable = document.getElementById("draggable"),
        target = document.getElementById("target");
    
    draggable.setAttribute('draggable', 'true');
    
    draggable.ondragstart = function (e) {
        e.dataTransfer.effectAllowed = 'copy';
    };    

    target.ondragover = function (e) {
        if (e.preventDefault) e.preventDefault();
        this.className = 'over';
        e.dataTransfer.dropEffect = 'copy';
        return false;
    };

    target.ondragleave = function () {
        this.className = '';
    };

    target.ondrop = function (e) {
        if (e.stopPropagation) e.stopPropagation();
        this.className = 'dropped';
        return false;
    };        
}());
                
            

For more information on drag and drop see http://dev.w3.org/html5/spec/Overview.html#dnd

Microdata

The microdata format in HTML5 allows us to use existing and custom vocabularies to add meta data to information on the page. Firstly, we need to set the scope of the vocabulary we have chosen to an element:

                
<section itemscope itemtype="http://url-to-vocabulary.com">
                
            

Then, use the 'itemprop' attribute to define the type of content that is contained in the element.

                
<section itemscope itemtype="http://url-to-vocabulary.com">
    <p itemprop="name">Cathy Lill</p>
</section>
                
            

For more information on Microdata go to http://dev.w3.org/html5/md/

Form Elements

There is a large collection of new form input types that provide a richer, more meaningful user experience, and can also convey more detailed information about form controls to screen reader users. Here is a few examples.

For more information on the new form in HTML5 go to http://diveintohtml5.org/forms.html