As you all know (maybe some of you don’t) HTML4 has been among us for a decade now. If you ask me, it’s about time to change some things. HTML5 will brings some pretty nice changes. If you want to know what will be different just read this article. I’ll give you some info about useful things you can expect in HTML5. You should note that these features may change with time.

The main change I think, will be in structure of the document. Most websites use very common layout these days.

website layout

HTML5 will have new elements which will replace these common div’s. The markup for the upper website would look something like this:

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

I think the main advantage would be cleaner code and better structure of the website. Let me explain what kind of content would go in these tags.

  • Header should contain the <h1> title of the page and main banner
  • Nav should be used for main menu navigation which should be written with the help of <ul> element
  • Article element should have the main content in it like posts, articles, …
  • Section can be used to define the structure of the article. It can be used for chapters.
  • Aside is basically a sidebar. You should put your secondary navigation here.
  • Footer should contain legal information, links, … These days there are many websites that uses footer for much more that just for displaying legal information.

Video and audio

Embedding video in HTML is not really done as it should be. HTML5 will change this with new video and audio elements. For people who will need to embed video as simple as possible there will be default user interface available. You would just insert this next code:

<video src="video.ogv" controls poster="poster.jpg" width="400" height="220">
<a href="video.ogv">Download movie link</a>
</video>

The poster attribute is to display image which will be shown before video starts to play. To display audio stream you would insert this code:

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

For those who will want to make user interface of the player similar to website’s design there are many events and methods which can be used to customize video controls.

<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>

I guess the biggest change will be the main structure of the document. But with growing popularity of audio and video on the web there are many great possibilities for these new elements.

What do you think about HTML5? Do we need these changes?

Popularity: 1% [?]

If you like this post, you could subscribe to full feed RSS. You can also subscribe by Email.

stumble upon digg technorati rss feed

Spread the word using these buttons.