Categories
CSS & HTML Tips

New Tags of HTML 5 (A New Features Tutorial)

Firefox 3.5 has been released with full support for the current stage of HTML 5. Although the rest of the browsers haven’t explicitly adopted the new tags and new features of HTML 5 yet, you can safely use HTML 5 tags in your web page and style them in CSS just as if they are a traditional HTML 4 tag, no problem.

Below is a list of the new tags introduced in HTML 5 which are subject to change in future, especially after the official recommendation release of HTML 5.

  1. <article> – intended for the content section of the web page, can be seen as <div class=”article> or <div class=”content”> or something.
  2. <aside> – for content aside from the primary content stream such as a flyover or a sidebar.
  3. <audio> – including audio files in the web page as an element.
    <audio src="audiofile.wav">
    <p>Your browser doesn’t support audio playback.</p>
    </audio>
  4. <bb> – tag to indicate browser commands.
  5. <canvas> – tag containing graphic information to for browsers to render vector images in real-time after loading the canvas data, much like SVG.
  6. <command> – definition of a specific action the user can invoke via the interface controls such as a push button or clickable link.
  7. <datagrid> – used to define a datagrid which is just a representation of tree, list or tabular data that is interactive. Basically, a behavioral structural data container.
  8. <datalist> – specifies a pre-entered list of options that can be used as an autocomplete feature of your form. For example, when the visitor enters something in the text field, the browser tries to guess and create an autocomplete dropdown from the datalist you have provided.
  9. <details> – containing extra information that can be shown or hidden upon user demand.
  10. <dialog> – HTML tag specifically designed for dialog content between several entities such as people.
  11. <eventsource> – representing a target for events generated by the remote server.
  12. <figure> – used mainly for illustrative content such as a diagram, a graph, a photo or other forms of annotations.
  13. <footer> – semantic tag specifically designed for the page footer, can be seen as something like <div id=”footer”>.
  14. <header> – much like the <footer> tag, it lives as the the header section of the web page.
  15. <mark> – used to emphasize, mark or highlight content such as a string of text for reference purposes.
  16. <meter> – intended for measurable numeric results:
    <meter>3.14159</meter>
    <meter>77.1%</meter>
    <meter>1/3</meter>
  17. <nav> – semantic tag for the navigational section of a web page such as a menu.
  18. <output> – representing the output part of something such as a script, a programming function or a calculation.
  19. <progress> – semantic tag for the representation of progress of a task, for example, in the form of a progress bar.
  20. <section> – semantic representation of section of the content. For instance, an <article> can contain a <header> and can be divided into several <section>s. A full example of an article:
    <section>
       <section>
          <article>
             <header>
                <h1>Div Soup Demonstration</h1>
                <p>Posted on July 11th, 2009</p>
             </header>
             <section>
                <p>Lorem ipsum text blah blah blah.</p>
                <p>Lorem ipsum text blah blah blah.</p>
                <p>Lorem ipsum text blah blah blah.</p>
             </section>
             <footer>
                <p>Tags: HMTL, code, demo</p>
             </footer>
          </article>
          <aside>
             <header>
                <h1>Tangential Information</h1>
             </header>
             <section>
                <p>Lorem ipsum text blah blah blah.</p>
                <p>Lorem ipsum text blah blah blah.</p>
                <p>Lorem ipsum text blah blah blah.</p>
             </section>
             <footer>
                <p>Tags: HMTL, code, demo</p>
             </footer>
          </aside>
       </section>
    </section>
  21. <source> – used to specify the source of various media types for either <audio> or <video>.
    <audio>
    <source src="mediafile.wma" type="audio/x-ms-wma">
    <source src="mediafile.mp3" type="audio/mpeg">
    …
  22. <time> – containing the date or time information in the web page.
  23. <video> – just like <audio>, it represents a video in the HTML page.

For a full example of a HTML 5 web page using all HTML 5 tags, come here.

You can also pre-order these 3 books being released near the end of 2009 for more serious coverage of the new web markup language, HTML 5:

  1. Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Including HTML 5 Preliminary Coverage (6th Edition)
  2. Sams Teach Yourself HTML and CSS in 24 Hours (Includes New HTML 5 Coverage) (8th Edition)
  3. HTML & XHTML Pocket Reference

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.

3 replies on “New Tags of HTML 5 (A New Features Tutorial)”

Comments are closed.