866.249.6095
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:
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.
Putting it all Together
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.
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.
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