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.
