Exploring HTML 5
Category: HTML5 / Posted on 6th June 2014
With browser support continuing to rise for HTML 5, the chimps here thought it may be worthwhile exploring some of the key elements of HTML 5.
In this short article, we'll explore the likes of DOCTYPE, HEADER, ARTICLE, NAV, SECTION, ASIDE and FOOTER.
Prior to HTML 5, you had several options when defining your DOCTYPE. You could choose either Transitional, Strict or Frameset. An example of an XHTML Transitional doctype can be found below:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This can be quite difficult to remember and was extremely tedious to code. With HTML 5, there is a simpler way to define your doctype.
That's all there is to it. No long URLs or number / letter combinations. All major browsers support this doctype.
The <header> tag is used to specify a header element of a document. It is currently supported by the following browsers:- Internet Explorer 9+, Firefox, Opera, Chrome and Safari.
Unfortunately, the <header> tag is not supported on Internet Explorer 8 and earlier versions.
If you download this file and include the following code within the <head> section of your HTML document, you should have support for your HTML 5 elements across all browsers (including IE 8 and below).
<!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]-->
The <article> tag is a new addition to HTML 5. The W3C specification states the following:-
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Not particularly clear! The article in a magazine is probably the best way to think about this. So, an article may have it's own header / footer and can be independent from the page it resides.
The <nav> element is a very welcome addition. It is used to define major navigation blocks within your code. You could have it wrapped inside a <header> or <article> element, or it can be independent on its own.
Below is a simple NAV example:-
<nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="services.php">Services</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav>
HTML 5 offers semantic elements to define different parts of a web page. The <SECTION> tag is one of these elements. It is used to define a section in a document. The W3C specification states the following:-
The <section> element is an element designed to programmatically designate sections of document content. It represents the section of a document that is grouped around a general theme and often comes with a specific heading.
The <aside> element is intended to display content related to a main article or parent section. Think of it like a sidebar that you would use to output Twitter updates, client testimonials and other relevant elements.
* You can include more than one footer within your HTML documents.
We believe HTML 5 is a great step forward and will continue to grow in popularity. We've created a simple HTML 5 document below, which includes all the elements we've discussed here.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>EXAMPLE HTML 5 DOCUMENT</title> <link rel="stylesheet" href="css/style.css" /> <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> </head> <body> <header> </header> <article> <section> </section> <aside> </aside> </article> <footer> </footer> </body> </html>
In future articles, we'll be exploring new media elements, using canvas, CSS 3 and much more. Thanks for taking the time to read this article.
Post a comment