What Is HTML5?

HTML5
HTML5 is the next version of HTML. This will introduce some brand new features which will make building HTML even easier. This is by introducing features which to make your website layout clearer to both coders and search engines.

This can help search engines because of the header, footer, nav and article tags. These are newly introduced tags which define the main areas of a website. If you can tell the search engines that the nav will hold links to navigate around the site then they can use all the links in this section. The article tag is probably the most important tag, as content is the most important part of a page you can let the search engines know that this area is where all the content is.

Apart from the new tags which are included in HTML5 it also introduces a feast of APIs which allow you to make graphical drawings, store data offline and drag and drop.

Getting Started With HTML5

Getting started using HTML5 is very easy and it's using my favourite of the new HTML5 features the Doctype.

Can you remember what the doctype is for transitional XHTML? I certainly can't that is something I have to go look up every time I start a new page.

HTML5 makes this very easy all it is to define a document as HTML5 is.

<!doctype html>

I think I can remember that one. That's all you have to do to make your page HTML5, you can even do that now without effecting anything on your page. Even good old IE6 will understand what it is. So far this is all I have changed on this site I am working on making all the changes to HTML5, but for now I have changed the doctype and I am officially using HTML5.

Why Use It?

Question
HTML5 comes with a number of advanced features to make it easier for the developer/designer to use HTML. Now I know you are going to say that HTML was easy to use anyway that's one of the reasons it became so popular. But HTML5 will group your code, group your content, create cleaner markup and bring you advanced features you would normally have to write Javascript to do.

HTML5 allows you to draw on a canvas, play a video, design better forms, or build web applications that work offline.

The main reason to use HTML5 now is because we know it is not going anywhere, it is here to stay for along time. This is what the W3C said about HTML5 back in 2009.

Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML.

What browsers support HTML5?

chromium-iconFirefoxInternet ExplorerSafariOpera

Today all browsers support certain HTML5 tags even IE6 understands the shorthand <!doctype html> and will render the pages correctly.

But for old browsers that don't understand the other new tags such as header, section, aside and article they will not render these correctly and will render them as inline elements. This can cause problems with styling so you need to change the styling of these elements to block so the older browsers will understand how to render these.

header, section, article, aside, nav, footer {
  display: block;
}

Getting HTML5 To Work In IE

Internet Explorer
But for Internet explorer 8 or lower the above solution wouldn't work as they don't understand what these tags are so they will just be ignored, you need to use Javascript to create the elements before you use them in your code.

<script>
  document.createElement('header');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('nav'); 
  document.createElement('footer');
</script>

Use HTML5 In IE8 or Lower

New HTML5 Tags

Tags
HTML5 has released new tags which help define the layout and structure of the page.

This is a typical page using the old HTML tags.

<html>
<head></head>
<body>
<div id="header">

</div>
<div id="nav">

</div>
<div id="content">
     <div id="article">

     </div>
     <div id="sidebar">

     </div>
</div>
<div id="footer">

</div>
</body>
</html>

Just looking at this HTML you can clearly see the different sections and just reading it you can clearly understand what each div will be used for thanks to the ID tags.

But how does the search engines know what these are for?

This is where HTML5 comes into it's own, below is the same structure but in HTML5.

<!doctype html>
<html>
<head></head>
<body>
<header>

</header>
<nav>

</nav>
<section>
     <article>

     </article>
     <aside>

     </aside>
</section>

<footer>

</footer>
</body>
</html>

Now again you can see exactly what these sections are and what content they are going to hold, but as these are defined tags the search engines will know what the sections are.

Another difference you may notice is the doctype. HTML5 only has 1 doctype which as always is defined at the start of the document

<!doctype html>

which simply tells the browser that this is a HTML document.

Semantic Tags

The main change with HTML5 is to create more semantic tags so they will explain what sort of content is going to be put into these tags.

Header

<header>

</header>

The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required.

It will contain the header for the page and/or section therefore header can appear in multiple places on the page. Can also be an ideal place for logos, search forms or a table of contents for the page and/or section.

Nav

<nav>

</nav>

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.

Therefore an ideal place for a nav tag to go will be in a header or footer. A header will normally hold links which help navigate around the site, also a footer will normally hold important links for the website.

Section

<section>

</section>

Is the most generic of the new structural elements, containing content that can be grouped thematically or is related.

Section is the most generic of the structural tags, a section is defined as the thematic grouping of content. A section will typically content it's own header and content, which can be used separate to the page.

An example of a section would be a tabbed page or numbered sections of a page.

In typical web design you can separate the content of the website into different sections, introductions, features, news, contact etc. These example will be perfect candidates for section.

Aside

<aside>

</aside>

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Normally used for content which is related to the main content but can be independently moved, this is ideally used for quotes or a sidebar. They are linked to the page but can also be used independently.

Article

<article>

</article>

The article element consists of self-contained content in a document, page, application, or site.

The content of the article is intended to be independently distributed or reused elsewhere.

This is ideally used for page content, a forum post or a blog post. It can be separated from the page and still hold value. This area of the page can then be syndicated.

Footer

<footer>

</footer>

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

Footers will normally appear at the end of a page but like headers you can have multiple footers per page as they are used to define the end of a section.

HGroup

<hgroup>

</hgroup>

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

What Are You Waiting For?

Advertise here

Comment