Important HTML5 Elements and How You Should Use Them
Sep 13, 2011 | In Miscellaneous |I’m sure all of you know about HTML5, the new HTML spec. One of the main things is the introduction of some semantic elements. With HTML4 (or any previous HTML), divs were usually used to hold content. With HTML5, you can make your site more SEO-friendly as well as easier to code and to style. Today, we’ll go over the new HTML5 elements specifically made to help with semantics.
Section
A section is a slightly more specific version of a div element. Divs should still be used as container elements, but sections are for specific parts of a page. For example, with a tabbed content box, a section element could be used for each tabbed page. Sections could likewise be used to organize content in a sidebar. If you have a one-page website, sections are your friend. A section for the contact area, a section for the info area…you get the drift.
Nav
The nav element, surprisingly enough, is used for navigation. It isn’t restricted to the nav bar on your site; it can be used for any group of links. You could even have a nav element inside your post, if you link to your external sources. Basically, it is used to group a set of links.
Article
This element is used to hold an independent composition. In other words, it could be used for a forum post, a comment, or a post. This one is a must-have if you’re going to create an HTML5 wordpress theme.
Aside
The aside element is used to hold content that is related to another block on the page. For example, you could use the aside element to define a word in a blog post. The content of the aside element is related to the blog post, but not quite enough to actually be inside it. The aside element can also be used as a main site sidebar, because the content in the sidebar is related to the content of the rest of the page.
Header
The header element is used to encompass the title and top part of the page. An example usage would be to wrap the navigation bar and logo on a site. Of course, the nav element would still be used for the navigation.
Footer
The footer is used to hold the content at the bottom of a page. It could also be used at the bottom of an article to contain information about the article. For example, you could use it to hold the author bio, and links to related posts.
Conclusion
HTML5 is still in development, but you should start to use it now, because it brings many added benefits compared to HTML4. Semantics, simplicity of use, the new DOCTYPE that’s super easy to memorize…HTML5.