Mobile navigation

Blog | Marketing, Scotland

Home   »   Blog   »   Exploring HTML 5

Exploring HTML 5

Exploring HTML 5

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.

DOCTYPE element

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.

		
<!DOCTYPE html>
		
	

That's all there is to it. No long URLs or number / letter combinations. All major browsers support this doctype.

HEADER element

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.

A very useful JavaScript file can be found at the following URL:- https://code.google.com/p/html5shiv/

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

ARTICLE element

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.

NAV element

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>
		
	

SECTION element

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.

ASIDE element

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.

FOOTER element

The <footer> tag is used to define a footer for a document or section. Typically, it should contain information such as the author, copyright details, links to terms of use, contact details etc.

* You can include more than one footer within your HTML documents.

IN CONCLUSION

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.

No comments found.

To add a new comment, click on the tab above, labelled 'Post a comment'. You'll then need to provide some details.

Post a comment

We'd love to hear your thoughts on this article. Simply complete the form below. Please note, your IP address will be logged upon posting a comment.