HTML5 fundamentals – The Power of HTML 5 has been harnessed by ICND.

HTML5: Writing Semantic Markup!

Long gone are the days of Photoshop generated TABLE layouts, colspan, rowspan, vertical align, td, td, td, td, td, ect., or at least they should be. There are those who still choose to create website markup in this manner and it drives me nuts! It's 2011, not 1995, let's use HTML5, it's supported on modern browsers like Firefox, Chrome, Safari and Opera, and there's even a shim provided by GOOGLE that allows Internet Explorer (all versions) to utilize the core of HTML5 tags.

What do I need to start with?

It's simple, first start your HTML file with the google doctype: <!doctype html> (this will enable HTML5) and you're ready to go. Let's look at a base example I like to start out with:






HTML5 Site




The conditional comment is to provide HTML5 support for any version Internet Explorer.

HTML5 Tags: Meat and Potatoes

Figuring out what tags to use for every section is your job as a FrontEnd developer, here are the ones I find that I use the most:

<header>
<footer>
<nav>
<aside>
<article>
<section>
<address>
<figure>
<figcaption>
<time>

Below is an example of these tags used between the <body>:

Title of Post

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Best Video Ever!
© 2011 HTML5 Site

Putting it all Together






HTML5 Site

Title of Post

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Best Video Ever!

Title of Second Post

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

© 2011 HTML5 Site



Congratulations!

You've made your first start into making semantic HTML5 markup! Next time we'll be talking about using CSS3 on these HTML5 tags!

HTML5 Resources:

W3Schools.com – HTML5 Tag Reference: http://www.w3schools.com/html5/html5_reference.asp

Leave a Reply

Your email address will not be published. Required fields are marked *