Learn about Html5

Abstract

The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.

To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.

Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.

Note that the specification is still a work in progress and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.

Structure

HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class.

The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections.

The markup for that document could look like the following:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

There are several advantages to using these elements. When used in conjunction with the heading elements (h1 to h6), all of these provide a way to mark up nested sections with heading levels, beyond the six levels possible with previous versions of HTML. The specification includes a detailed algorithm for generating an outline that takes the structure of these elements into account and remains backwards compatible with previous versions. This can be used by both authoring tools and browsers to generate tables of contents to assist users with navigating the document.

For example, the following markup structure marked up with nested section and h1 elements:

<section>
  <h1>Level 1</h1>
  <section>
    <h1>Level 2</h1>
    <section>
      <h1>Level 3</h1>
    </section>
  </section>

</section>

Note that for better compatibility with current browsers, it is also possible to make use of the other heading elements (h2 to h6) appropriately in place of the h1 elements.

By identifying the purpose of sections in the page using specific sectioning elements, assistive technology can help the user to more easily navigate the page. For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. Authors also benefit because replacing many of the divs in the document with one of several distinct elements can help make the source code clearer and easier to author.

The header element represents the header of a section. Headers may contain more than just the section’s heading—for example it would be reasonable for the header to include sub headings, version history information or bylines.

<header>
  <h1>A Preview of HTML 5</h1>
  <p>By Poojith Raj</p>
</header>
<header>
  <h1>Example Blog</h1>
  <h2>Insert tag line here.</h2>
</header>

The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

<footer>© 2007 Example Inc.</footer>

The nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

The aside element is for content that is tangentially related to the content around it, and is typically useful for marking up sidebars.

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/2010/11/">September 2011</a></li>
    <li><a href="/2010/11/">August 2011</a></li>
    <li><a href="/2010/11/">July 2011</a></li>
  </ul>

</aside>

The section element represents a generic section of a document or application, such as a chapter, for example.

<section>
  <h1>Chapter 1: The Period</h1>
  <p>It was the best of times, it was the worst of times,
     it was the age of wisdom, it was the age of foolishness,
     it was the epoch of belief, it was the epoch of incredulity,
     it was the season of Light, it was the season of Darkness,
     ...</p>
</section>

(Excerpt from A Tale of Two Cities)

The article element represents an independent section of a document, page or site. It is suitable for content like news or blog articles, forum posts or individual comments.

<article id="comment-2">
  <header>
    <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
        by <a href="http://example.com/">Poojith</a></h4>
    <p><time datetime="2007-08-29T13:58Z">August 29th, 2011 at 13:58</time>
  </header>
  <p>That's another great article!</p>
</article>

Video and Audio

In recent years, video and audio on the web has become increasingly viable and sites like YouTube, Viddler, Revver, MySpace, and dozens of others are making it easy for anyone to publish video and audio. However, since HTML currently lacks the necessary means to successfully embed and control multimedia itself, many sites are relying on Flash to provide that functionality. Although it is possible to embed multimedia using various plug-ins (such as QuickTime, Windows Media, etc.), Flash is currently the only widely deployed plugin that provides a cross-browser compatible solution with the desired APIs for developers.

As evidenced by the various Flash-based media players, authors are interested in providing their own custom-designed user interfaces, which generally allow users to play, pause, stop, seek, and adjust volume. The plan is to provide this functionality in browsers by adding native support for embedding video and audio and providing DOM APIs for scripts to control the playback.

The new video and audio elements make this really easy. Most of the APIs are shared between the two elements, with the only differences being related to the inherent differences between visual and non-visual media.

Both Opera and WebKit have released builds with partial support for the video element. You may download the experimental build of Opera or a recent nightly build of WebKit to try out these examples. Opera includes support for Ogg Theora and WebKit supports all the formats that are supported by QuickTime, including third party codecs.

The simplest way to embed a video is to use a video element and allow the browser to provide a default user interface. The controls attribute is a boolean attribute that indicates whether or not the author wants this UI on or off by default.

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>

The optional poster attribute can be used to specify an image which will be displayed in place of the video before the video has begun playing. Although there are some video formats that support their own poster frame feature, such as MPEG-4, this provides an alternative solution that can work independently of the video format.

It is just as simple to embed audio into a page using the audio element. Most of the attributes are common between the video and audio elements, although for obvious reasons, the audio element lacks the width, height, and poster attributes.

<audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
</audio>

HTML 5 provides the source element for specifying alternative video and audio files which the browser may choose from based on its media type or codec support. The media attribute can be used to specify a media query for selection based on the device limitations and the type attribute for specifying the media type and codecs. Note that when using the source elements, the src attribute needs to be omitted from their parent video or audio element or the alternatives given by the source elements will be ignored.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp"
    media="handheld">
    <source src="video.ogv" type="video/ogg;
    codecs=theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

For authors who want a little more control over the user interface so that they can make it fit the overall design of the web page, the extensive API provides several methods and events to let scripts control the playback of the media. The simplest methods to use are the play(), pause(), and setting currentTime to rewind to the beginning. The following example illustrates the use of these.

<video src="video.ogg" id="video"></video>
<script>
  var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
   <button type="button" onclick="video.pause();">Pause</button>
   <button type="button" onclick="video.currentTime = 0;">
   << Rewind</button>

There are many other attributes and APIs available for the video and audio elements that have not been discussed here. For more information, you should consult the current draft specification.

Click here to read more about HTML 5 tips and techniques

18 Comments

  1. rtyecript 8 years ago

    I really liked the article, and the very cool blog

  2. unsopeteect 8 years ago

    I was just searching for this info for some time. After 6 hours of continuous Googleing, finally I got it in your website. I wonder what is the Google’s issue that doesn’t rank this kind of informative websites closer to the top. Usually the top web sites are full of garbage.

    • Chyna 8 years ago

      This does look promising. I’ll keep cmonig back for more.

  3. Sharvani 8 years ago

    Marvelous blog, i search lot of time in google, at last i got this very nice some tutorials, and i like the web site design too, very simple and cool , and i found some very nice html 5 and css3 works too.. Once again thanks to face behind the site.

  4. Jason 8 years ago

    Very nice, i suggest Admin can set up a forum, so that we can talk and communicate.
    Nancy

  5. mobilt bredband 8 years ago

    Hello there, simply turned into aware of your blog thru Google, and found that it is really informative. I?m gonna watch out for brussels. I will appreciate if you continue this in future. A lot of other folks will be benefited from your writing. Cheers!

  6. Saundra Farrauto 8 years ago

    Fantastic views on that!

  7. Santo Constante 8 years ago

    Very interesting post. Thank you for sharing.

    • Makendra 8 years ago

      Going to put this aticrle to good use now.

  8. Marina 8 years ago

    You have really interesting blog, keep up posting such informative posts!

  9. Ronald 8 years ago

    Much appreciated for the information and share!

    • Anisha 8 years ago

      AFAICT you’ve cvoeerd all the bases with this answer!

  10. Thx for this great information that you are sharing with us!!!

  11. This is a really good read I think, Have to admit that you actually are one of the right bloggers I ever saw.I appreciate placing this interesting article.

    • Reggie 8 years ago

      It’s like you’re on a misiosn to save me time and money!

  12. metformin online 8 years ago

    Great post I must say. Simple but yet interesting. Wonderful work!

  13. Shivani 8 years ago

    Thank you using the good writeup. By the way, how could we communicate?

  14. kindle 8 years ago

    How do you start your own website to advertise your new business?

Leave a reply

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

*