HTML 5 – full guide: What is HTML 5?

I want to focus on the new stuff that most of you are not familiar with so the intro will be pretty short.

HTML5 is the latest version of that markup language which includes new features and improvements to existing ones. It’s been designed to run on any platform (as long as the browser supports it), it’s compatible with older browsers and no IE 6 is not old – it’s ancient!

The purpose of this upgrade is to redefine existing markup elements and create new ones to allow the web designers build clean and clear markups and use common functionalities instead of rewriting them over and over again. Furthermore HTML5 allows to add audio and video elements the same way you add an image (using the <img> tag), it enables advanced drawing capabilities using the <canvas> tag and many more.

Page structure

 
 This is the old html page structure.

This is the new html5 page structure.

Look at the <DOCTYPE> tag. This tag simply tells the browser what kind of document this is. The old version also tells what HTML version the document is using.

HTML5 <DOCTYPE> simply tells the browser that the document is an HTML file even without mentioning the version because the browsers are supposed to support all HTML versions.  It’s not  a huge change but that’s what HTML5 is all about – making the page cleaner and clear as much as possible.

The script tag reminds me the “var” keyword in C#. No more redundant declaration like “type=javascript”, just open the <script> tag and add the source of the script. The browser will parse the section and treat it as javascript based on the script file included. The <style> tag acts the same.

New elements

So far for the intro. From now on I’ll be reviewing the new and improved HTML5 markup elements. In this post I’ll review the header, footer, nav and aside tags.

Why did the creators of HTML5 choose these elements? Before building the new markups the creators searched the web to find the elements that are most commonly used. They searched the id and the class attributes (<div id=”header”/class=”footer”) and here are the results.

Header

The first of the new elements is the header element which represents the header of our page (where the logo goes), however header is not restricted to appear just once in a page – it can represent any header of content inside the page.

How do you know when to use it? Every time you’ve used <div id=”header”> or when you have content that can be considered as a header.

The header of the youtube page

Footer

The footer element is the section that is usually the end of some content like share buttons, copyrights and etc. Same as header the footer element can appear more than once in a single page.

This is a part of a youtube page. The views count and the date is the footer of the video content but not the end of the whole page.

Nav

The nav element represents a group of navigation links like a menu.

It’s not recommended to use nav on every group of links like the links in the copyright section (footer?) or group of links like the facebook chat friends. Only links that are responsible for navigation inside your application should be wrapped with the nav element.

Facebook menu – group of navigation links

Aside

The aside element is a part of the page that is separated of the main content. Its content can stand on its own in every page but has to be part of a bigger content. Same as all the other elements that I’ve mentioned before, the aside doesn’t have any styling functions – it can be “on the side” of the page, under the header or even above it like a banner on the very top of the page.

The “popular on youtube” is not the main content of the page, it’s a group of links (nav?) that is perfect on the side of the page.

All the elements I've covered so far don't add new functionalists, using them only makes your web pages cleaner and more readable for other developers (one day someone else will have to maintain your application) by creating meaningful separation of your content.

That’s it for the stuff that most of you know. In my next post I’ll show you the less known elements like the article, section, mark, meter, time and progress elements.