HTML5 is the future of the web….and the future is today. HTML5 is the 5th installment of markup languages used for the web and makes a better DOM. The W3C HTML Working Group is the group of people responsible for granting access and deleting unnecessary (i.e. <hgroup>) elements. To learn more about its implementation, I suggest reading this Wiki article.
It has a lot of progressive elements that, if you’re a developer, you should be using in all of your markup. You should be aiming to writing your markup as semantic as possible. In other words, your markup should describe the content that you are trying to create.
Good Semantics vs. Bad Semantics
When I say write semantically, I’m literally saying you that you should be focused on marking your code as if you were explaining what a particular group of elements does and not explaining its presentation. The approach used to go about doing this might differ from individual to individual but this is where some critical thinking comes into play. Should you use id’s or classes?
Let’s take a look at an example. Let’s create 2 columns. And for these 2 columns, you’ve decided to use div’s. How should you structure your divs? Well, if you have these 2 divs, you shouldn’t give them class names left and right. This isn’t semantic at all, right?
<div class="colLeft"> <p>A paragraph of text for the left column.</p> </div><!-- end colLeft --> <div class="colRight"> <p>A paragraph of text for the right column.</p> </div><!-- end colRight -->
Say that several months from now you want that div on the left on the right and the same for the opposite div. You just opened opened up a whole new can of worms for yourself. You should be naming them according to what they are.
<div class="feature1"> <p>A paragraph of text for the left column.</p> </div><!-- end feature1 --> <div class="feature2"> <p>A paragraph of text for the right column.</p> </div><!-- end feature2 -->
This looks much better and will make it much easier to make changes later on.
In my post I am only going to go over several HTML5 elements. There are over 30 new elements included in HTML5 and I’m not going to cover them all. You can still use older elements if you like (and you better have a very good reason why) but you will be much better off embracing the future and setting fall-backs for older browsers. If you’re interested in learning more, I’ll leave a few links at the bottom for you to take a look at.
Let’s first tell the web browser how to render the page. Back in the day, a web developer had to start the document by declaring the doctype with some god-awful long text just to tell the browser what version of HTML was being used. These versions are still used today but that’s a topic for another day. If you want to tell the browser to treat the page as an HTML5 document, you simply need to write:
<!doctype html>
That’s it! This is all you need to tell the web browser that what you are writing should be treated as an HTML 5 document.
What about div tags? Div’s aren’t very semantic at all but are necessary. Div’s should only be used if there aren’t any other suitable elements available. With HTML5, you shouldn’t be replacing these div’s with HTML5 as frequently as possible. So instead of writing…
<div id="mainContent">"A paragraph of useless text only used for this example."</div>
You should instead use the section element and write this…
<section>A paragraph of useless text only used for this example.</section>
Since the exact way to use these are not written in stone, it is up to the developer to say where and how each of these are to be used. I have overheard some people say you should use the nav element in each of the navigational links (including the footer) while others object to this and say the nav element should be only be used in the main navigation. What do you think? Is it best practice or is this misleading the browsers and end users by organizing each navigational list as a nav element?
I’m going to take a brief look at 5 of the most common used elements in HTML5: header, section, article, nav and footer.
5 commonly used HTML5 elements
1. Header – The header represents the head of the document. This element should be used to declare the primary heading of the page and should contain one heading tag (h1-h6).
<header> <h1>I'm a H1 header.</h1> <p>Just some paragraph text used as filler.</p> </header>
2. Section – The Section element is used to group different themes of the page. Again this is just best practice and should be used for good organization of the various parts of the page.
<section> <h2>I am a H2 header.</h2> <p>Just some paragraph text used as filler.</p> </section>
3. Article – The article is another container that should be used to group “like” elements together.This is usually used for articles, blog posts, etc. that are independent of the other elements.
<article> <p>Just some paragraph text used as filler.</p> <article>
4. Nav – The nav element represents a list of navigational links on the website. This is usually used with the list element to form a set of links for the user.
<nav> <ul> <li>First Navigational Link</li> <li>Second Navigational Link</li> <li>Third Navigational Link</li> </ul> </nav>
5. Footer – The footer gets a name of its own in HTML5. The footer usually contains additional navigational links and copyright info. Once again, screen readers should be able to declare this portion of your document much easier than a div.
</footer> <small>© 2013 <a href="http://www.ceejaysmedia.com">CeeJayS Media</a></small> </footer>
Further Reading
15 inspiring HTML5 experiments
Conclusion
As you can see, HTML5 has introduced some elements that should make it much easier for others to read your code. What do you guys think? Are you using HTML5 for your doctype declarations? What would you like to be included to its library?
As always, thanks for reading my blog. Feel free to follow me on Twitter, like me on Facebook or shoot me an email. Until next time, peace.