Skip to content

HTML5 new features: Doctype, Link, Script, Canvas, Figure, Figcaption, Local Storage, Header, Footer, Hgroup, Video, Audio, Required Attribution, Preload, Controls, Patterns, Mark.

     

    1. Doctype
     

    <!DOCTYPE html>

    That small bit, the new doctype declaration, in fact is not required. It’s used for older & current browsers that require doctypes. Browsers not yet compatible will render the page using the markup in the standards mode.

    The reason for it not being as specific as before is that HTML5 is a living standard. It is always changing. Welcome to the future. HTML5 has arrived.
     

    2. <link> & <script> is now type free.
     

    <script src=”path/to/javascript.js”></script>
    <link rel=”stylesheet” href=”path/to/style.css” />
     

    Type does not need to be specified in these tags anymore.
     

    3. <canvas>.
     

    The <canvas> is a revolutionary new tag in HTML5. It works exactly like a canvas holding animations drawn in real time.
     

    4. <figure> & <figcaption>.

    <figure>
    <img src=”path/to/image” alt=”useless cat image number 4231618″ />
    <figcaption>
    <p>This is a picture of yet another cat </p>
    </figcaption>
    </figure>
     

    <figure> is to be used as the opening tag of an image element, with <figcaption> being used to describe the image.
     

    5. Quotation marks the spot.
     

    <p id=myId> rebel by design.
     

    Quotation marks are now optional.
     

    6. Local Storage.
     

    Not exactly HTML5, but grouped with it. Local storage is kinda like the next step in cooki evolution.
     

    7. <header> & <footer>.
     

    <header>
    </header>
    <footer>
    </footer>
     

    The <header> can be used to sort ele,msts that would fit in the head part of the document, eg meta data. The <footer> can be used to store the copyright & related info of a page.
     

    8. hgroup.
     

    <hgroup>
    <h1> Recall Fan Page </h1>
    <h2> Only for people who want the memory of a lifetime. </h2>
    </hgroup>

    Used to group headings.
     

    9. Required Attribute.

    <input type=”text” name=”username” required>
     

    Used for specifying if a particular input is required or not.
     

    10. <video>.
     

    <video >
    <source src=”Meow.ogv” type=”video/ogg; codecs=’vorbis, theora'” />
    <source src=”Meow.mp4″ type=”video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′” />
    <p> Your browser is old. </p>
    </video>
     

    As HTML5 doesn’t specify a specific codec for video, it’s a free for all as far as video formats go. Safari and Internet Explorer 9 support video in the H.264 format, Firefox, Chrome and Opera support the open source Theora and Vorbis formats.
     

    11. <audio> .

    <audio>
    <source src=”file.ogg” />
    <source src=”file.mp3″ />
    </audio>
     

    This is one of the major improvements of HTML5. Audio file playback is finally supported without the need for additional plugins. However agreeability on file formats is another story.
     

    12. <preload> .
     

    <video preload>
     

    Used to preload the video.
     

    13. <controls>.

    <video preload controls>
    </video>

    <audio controls>
    </audio>
     

    Enables the controls in the video/audio player.
     

    14. <pattern>.
     

    pattern=”[A-Za-z]{6,10}”
     

    The string [A-Za-z]{6,10} accepts only upper and lowercase letters. This string must also have a minimum of six characters, and a maximum of ten.
     

    15. <mark> .
     

    <mark>”Hell Yeah”</mark>.
     

    The <mark> is used as a marker, e.g. to highlight parts of text or search results.

    Say Hello!

    adeeb@adeeb.org


    Let’s work together!

    I’ve been building websites since dialups walked the earth.
    I develop, design, architect & maintain websites.

    © Copyright 2009 – Forever Adeeb