HTML5 and CSS3 are now able to be used in most modern browsers. You might be thinking to yourself why should I use such new technologies that don’t have complete cross browser compatibility? The answer to that is simple.
As with any job pushing your technical skills in your field will always help you to become a more well-rounded person. Sure HTML5 isn’t widely supported and is vastly changing, but taking the time to learn it and follow it’s changes will surely help you to be more prepared when the technology is finally ready.
HTML5 New Tags
DOCTYPE
The beautiful part about the new way to declare a DOCTYPE is that it’s so simple. It takes one line of code and 15 characters, no more long DOCTYPE s that are hard to remember.
<!DOCTYPE html>
CHARSET
This is a simplified version of the charset property which also helps you to memorize this bit of code.
<meta charset="utf-8">
HEADER
The new header element was created to contain the introductory information of your site.
A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
The header element will usually contain the primary navigation of your website. Here is an example below of a semantic header section.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
NAV
Normally when creating a site in XHTML I either use a div that has the class of NAV or I give the UL the ID of nav. The new NAV element allows you to section off your navigation.
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
As you saw in the above example the NAV element is being used in the HEADER section which is not necessary but semantic.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
ASIDE
The new ASIDE element is a bit confusing. It should only be used when it is related to the content around it, but is considered different from it. The official definition from W3C is below.
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography
In the example below I used the new ASIDE element as a featured section of the website. It is still related to the content on the page but is “Featured” so the ASIDE element works.
<aside>
<p>This is some featured content that works well with the new ASIDE element</p>
</aside>
ARTICLE
The ARTICLE element is used for content that is intended to be distributed or reusable.
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.
The documentation also addresses when to nest the ARTICLE element in your HTML.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Inside of the ARTICLE element you can use HEADER and FOOTER elements to separate the content in your article.
<article>
<header>
<h2>Article Title</h2>
<p><time pubdate datetime="2010-3-09T14:28-08:00"></time></p>
</header>
<p>This is the main content of the article that is not in the header or the footer of the article.</p>
<footer>
<a href="#">Show Comments</a>
</footer>
</article>
FIGURE
The FIGURE element allows you to have an element that is separate from the content its in and has an optional caption.
The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
<figure> <img src="figure.jpg" alt="figure image" /> <figcaption>This is a figure</figcaption> </figure>
HGROUP
The HGROUP element allows you to group heading tags together in essence giving the section more weight.
The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
<hgroup> <h1>Main Title</h1> <h2>Subtitle</h2> </hgroup>
SECTION
The SECTION element allows you to section off content that is nested within content. This is a complicated one because you need to know when to use ARTICLE or the regular DIV tag.
The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.
<article> <hgroup> <h1>Main Title</h1> <h2>Subtitle</h2> <hgroup> <p>This is a description of this main section</p> <section> <h1>Category 1</h1> <p>Description of category 1</p> </section> <section> <h1>Category 2</h1> <p>Description of category 2</p> </section> </article>
ADDRESS
The ADDRESS element is used specifically for contact information. Not just site wide contact information but could be per page or per node. This tag is NOT ONLY for a Physical Address it can hold other information.
The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
<address> <a href="#">Joe Bob</a>, <a href="#">Matt Smith</a>, <a href="#">Contact Info Related to this page</a> </address>
FOOTER
The FOOTER element is used specifically for sectioning content at the end of a specific section of content. This tag could be used at the end of an article not just as the main footer for your site.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
<article>
<header>
<h1>Post Title</h1>,
</header>
<p>This is the post content</p>
<footer>
<p>Comments: 8</p>
</footer>
</article>
Enabling HTML5 Elements
In order to use these new tags currently you will need to display them block in your CSS, because the browsers don’t really know how to handle them.
header, nav, article, section, footer, figure, aside {
display: block;
}
Well that’s it for this tutorial on HTML5 if you enjoyed it please promote it to all the social networks you can at the bottom of this page. Start coding for HTML5 now and you will be ready when the switch is finally made.
For more information on HTML visit the W3C documentation here
Loading ...
March 11th, 2010 at 3:57 pm
got to learn this
soon
sriganesh´s last blog ..Community News : Next Level
March 11th, 2010 at 4:15 pm
thanks for the resume !
very useful for my future websites.
March 11th, 2010 at 8:28 pm
Social comments and analytics for this post…
This post was mentioned on Twitter by threestyles: HTML5 Rocks My Socks Off http://is.gd/adlAX #HTML5 #web Please RT!…
March 11th, 2010 at 9:42 pm
You should buy new socks your feet smell.
I mean really, rocks my socks? Humor fail.
March 11th, 2010 at 11:32 pm
I’m very excited to start learning HTML5 and hopefully it won’t take as long as most people are saying to become standard (10 years or so).
Great post!!
Lee Gustin´s last blog ..Amazing Illustrations of Justin White
March 12th, 2010 at 5:10 am
@Lee
Thanks for the support. I agree with you, I hope it won’t take as long to implement it either. It’s so much more semantic I’m so excited about it.
March 12th, 2010 at 11:08 am
it will take a while before best practices get unveiled so we can know where to use which tag… btw HTML5 is very search engine oriented it seems
Saad Ibrahim´s last blog ..Coming Soon
March 12th, 2010 at 2:37 pm
Nice look at the new elemts of HTML5. There’s only one thing that bugs me, I’d rather ‘nav’ be called ‘menu’.
BTW Shane, it’s near impossible to read your reply (author) comment.
Benjamin Reid´s last blog ..How to design a super slick UI button in Photoshop
March 12th, 2010 at 4:30 pm
[...] [WebDev] Tour des nouvelles balises avec HTML5. [...]
March 12th, 2010 at 5:47 pm
I agree…nothing particularly earth shattering or socks rocking about those listed. Just some “semantic foolishness”
March 12th, 2010 at 7:07 pm
I cant wait for HTML5 and CSS3 to be the full fledged standards. They both show HUGE promise and function beautifully. Its an exciting time to be in web design.
chicago web design´s last blog ..Phoenix House
March 13th, 2010 at 1:58 am
Hi,
It’s a nice article to begin with html5. I’ll try something on my next project.
rambal´s last blog ..20 creative handwritten free font
March 13th, 2010 at 1:49 pm
Thanks, very nice work!
gines´s last blog ..Comentario de Showcase en prezi.com por Ezther
March 14th, 2010 at 4:04 pm
Wow HTML really rocls
Thanks for the introduction.
Henri´s last blog ..Tüpograafia
March 15th, 2010 at 1:26 am
Anyone know of a good HTML5 only uber-design page? I’d love to see a page that has ALL the bells and whistles from HTML5, kind of like a nicely designed ACID page or something, just showcasing / showing off what can be done.
Also, the image for this post is great. It reminds exactly of David Airey’s socks
.
http://bonfx.com/breaking-through-to-logo-design-beauty-david-airey-hat-and-socks-memoribilia/
(scroll down just a tad after the hat
)
March 15th, 2010 at 1:35 am
[...] HTML5 Rocks My Socks Off | Three Styles. Share and Enjoy: [...]
March 15th, 2010 at 1:50 am
Great post with HTM5!
I will use these in my new website, Ae-projects store website.
Thank You Shane!
March 15th, 2010 at 2:53 am
I haven’t got around to using HTML5 yet. You’ve got me interested with the ASIDE element when mentioned that it works well as a featured post area.
Time to go try them out.
March 15th, 2010 at 7:55 am
Helped me very much! Very good for a first overview before diving into the material myself!
Thx heaps!
March 15th, 2010 at 11:05 am
I’m really glad you all enjoyed the post! Thanks for visiting!
March 15th, 2010 at 11:09 am
[...] via HTML5 Rocks My Socks Off | Three Styles. [...]
March 15th, 2010 at 12:15 pm
Great list. Clear, precise and very helpful! Bookmarked
March 15th, 2010 at 2:30 pm
[...] such new technologies that don’t have complete cross browser compatibility? The answer to that is simple. Share and [...]
March 15th, 2010 at 10:02 pm
[...] HTML5 Rocks My Socks Off. via [...]
March 16th, 2010 at 6:44 am
isn’t even part of HTML5, it’s been part of the HTML specification since (at least) HTML 3.2. Otherwise, nice overview of the newly added elements.
March 16th, 2010 at 6:44 am
Damn, HTML got stripped out. I wrote that the ADDRESS-tag isn’t even part of HTML5.
March 16th, 2010 at 4:22 pm
@ Douglas: A great example of a live HTML 5 page, is Cameron Moll’s “colosseotype” site: http://colosseotype.com
Also, for those who are interested in using HTML 5 now, there is a technique pioneered by the brilliant John Resig called the HTML 5 shiv: http://ejohn.org/blog/html5-shiv/
Great writeup Shane; beautiful socks
March 16th, 2010 at 6:17 pm
Very straight forward introduction for HTML 5.
I was looking for something like this, thanks!
Omer Greenwald´s last blog ..How to Optimize CSS Selectors for a Faster Website
March 16th, 2010 at 6:45 pm
Feels like a good initial “toe-dip” into the world of HTML5. Good thing we’ve got our socks knocked off!
I do a lot of SEO-facing web design, so this is particularly of interest. I’m eager to see more, and I second Douglas Bonneville’s request for some HTML5 Bells & Whistles reference pages.
Thanks for a concise and helpful post, Shane!
Penina´s last blog ..Backup Strategies
March 19th, 2010 at 11:07 pm
nice intro! thanks!
InteractiveLogic´s last blog ..15+ Free Abobe Air Applications for Designers and Developers
March 21st, 2010 at 8:59 am
Nice article. Very useful one. Thanks for sharing this helpful post.
Mahmudur Rahman´s last blog ..Short History of Photography
March 21st, 2010 at 1:10 pm
Excellent article. I now realize I have been using article and section backwards. Thank you for the info.
March 21st, 2010 at 7:54 pm
Shane, good article on HTML5. Its so much cleaner and more organized.
Adam Hermsdorfer´s last blog ..Bing’s Online Marketing Launch Strategy
March 21st, 2010 at 8:16 pm
Thanks for the interesting post. I only wonder why you nested a div inside the “aside” element? seems redundant.
March 22nd, 2010 at 7:00 am
great article
nice for my learning thanx maan!
March 22nd, 2010 at 1:47 pm
@David
Good catch David, no need for that nested div. Took it out!
March 26th, 2010 at 3:25 pm
Nice intro!
Samoo´s last blog ..Menu Pages expanding search form
March 29th, 2010 at 6:34 am
[...] go ahead and add the coming soon text in.Coding the page with CSS3I just recently did a post on The basics of HTML5 but today we are going to stick with XHTML and use the XHTML Strict DOCTYPE.The Basics11. This is [...]
March 31st, 2010 at 7:38 pm
I passed the html basics, but this helps a lot if you are a beginner and want to learn
logolitic´s last blog ..50+ Typography art inspiration
March 31st, 2010 at 10:33 pm
Very nice description, thank you.
April 1st, 2010 at 3:56 pm
[...] like color, typography and branding. His points are reinforced with examples throughout. HTML5 Rocks My Socks OffHTML5 is only useable in modern browsers, but with a bit of javascript you can pull it off (even in [...]
April 4th, 2010 at 12:17 pm
[...] HTML5 Rocks My Socks Off [...]
April 17th, 2010 at 3:00 pm
It will be more helpful. Old coders can easily switch on this thingy. It is not so much complex and will not take time to be use to with it..
April 21st, 2010 at 2:51 pm
thank for this article, very helpful
April 29th, 2010 at 1:56 am
[...] HTML5 Rocks My Socks Off [...]
May 4th, 2010 at 9:46 am
Nice Article !
A showcase of sites using html5 markup : http://html5gallery.com/
Theo´s last blog ..Muss eine Webseite in jedem Browser genau gleich aussehen?
May 15th, 2010 at 10:38 am
There’s a lot to learn but I think it’s going to be worth it very soon – roll on IE9 and roll out IE6+7
Another HTML5 showcase gallery: http://101besthtml5sites.com
Keith´s last blog ..So, just what is Twitter?
May 24th, 2010 at 10:02 am
[...] HTML5 Rocks My Socks Off By Shane Jeffers (Three Styles – March 11th, 2010) [...]
June 5th, 2010 at 10:42 am
[...] HTML5 Rocks My Socks Off [...]
July 7th, 2010 at 3:58 pm
Cheers, explained nicely!
July 15th, 2010 at 4:48 pm
Very useful post. Thanks for sharing.
July 20th, 2010 at 1:45 pm
[...] HTML5 让我震惊了 By Shane Jeffers (Three Styles – March 11th, 2010) [...]
July 20th, 2010 at 5:16 pm
[...] HTML5 让我震惊了 By Shane Jeffers (Three Styles – March 11th, 2010) [...]
July 23rd, 2010 at 8:32 am
[...] HTML5 让我震惊了 By Shane Jeffers (Three Styles – March 11th, 2010) [...]
July 31st, 2010 at 4:24 am
[...] HTML5 让我震惊了 By Shane Jeffers (Three Styles – March 11th, 2010) [...]
August 17th, 2010 at 3:23 am
[...] HTML5 让我震惊了 By Shane Jeffers (Three Styles – March 11th, 2010) [...]
August 20th, 2010 at 10:35 pm
There are a couple of html5 themes available from WordPress.org which are awesome, like Toolbox and Just CSS. People should check them out
September 4th, 2010 at 5:54 am
Did anyone see the Google and Arcade Fire collaboration for their HTML5 project. Look it up. It’s actually really cool.
zoom´s last blog ..Mobile Monopoly
October 20th, 2010 at 12:10 pm
Excellent article, and just learning a few pieces of code for html5, so thanks for some new information and tips! Very helpful.
November 21st, 2010 at 10:55 am
Good post for me as a coding beginner, html5 is easy and simple to understand.
Paulchen´s last blog ..Hundreds – Solace
November 24th, 2010 at 2:40 pm
nice explanation
December 18th, 2010 at 6:27 am
Wow, I already wish I could program using it
Although I’m dead sure it won’t work on any of my visitor’s browsers just yet
Amr Boghdady´s last blog ..Das Wort des Tages
December 21st, 2010 at 7:43 pm
A big part of the work on HTML 5 is actually just fixing HTML 4 problems..
Kelly´s last blog ..Copy Any Game
February 16th, 2011 at 9:57 am
I really need to get started with html5, specially the replacement for flash is great for use on mobile phones, ipad etc.
February 22nd, 2011 at 9:03 pm
I’m new in htlm5 but keep on learning…thanks for this nice article
March 10th, 2011 at 10:30 am
This is the biggest complaint I have when people try to convince me that HTML5 can do anything Flash can do. I tried my hand at emulating a very specific drum machine using Javascript and the audio tag (linked it to my name here), and while it’s barely passable in Firefox, every other browser falls apart even trying.
April 2nd, 2011 at 11:10 am
IE currently requires a Javascript hack to use new HTML 5 structural elements.
May 13th, 2011 at 6:08 am
I basically just learned html coding, this would be a nice addition.
June 22nd, 2011 at 7:40 am
[...] HTML5 让我震惊了 By Shane Jeffers (Three Styles – March 11th, 2010) [...]
September 15th, 2011 at 11:55 pm
I am a beginner in this html coding, and this article really helping me a lot. Thanks for sharing this one..
Nova´s last blog ..Quick Car Insurance Quote
September 26th, 2011 at 1:47 pm
Nice and clean, @Clarise do not worry man, the end of IE is soon, the percents of users using IE decreases every day.
October 4th, 2011 at 3:18 pm
Hi,
Thanks for the article.
Just two things.
An aside is for secondary content related to an article, or the main topic on the page for example. Using a printed media example to illustrate the real purpose of an aside, if you read a book which had snippets of secondary or extra information contained in a little box and it’s related to, but separate from the main content on the page or chapter, then that’s an aside. That is the kind of thing the standards documentation is referring to as an example. So if I write an article, and I have little snippets of extra information related to the article topic then I’d use an aside tag for that.
I personally wouldn’t use the header tag for traditional masthead stuff. It’s really for articles or the main content. Even in sidebars, I’d use the header tag within sections. For me, the logo area is the masthead and the header is the title and related information at the start of an article or page content area.
I’m just a bit tired of seeing these two tags being misused because someone misunderstood the real purpose of these tags, or they decided to bend the spec to suit them.
November 22nd, 2011 at 7:40 am
awesome post, really useful for the learners. thanks.
January 1st, 2012 at 1:43 am
I’ve read 2 different books on HTML5, and I’ve started reading a 3rd one, and not one of them recommends that you use strict XML syntax just in case you need your HTML5 to be parsed as XML.