HTML5 Rocks My Socks Off

77

by Shane Jeffers


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

  1. DOCTYPE
  2. Charset
  3. Header
  4. Nav
  5. Aside
  6. Article
  7. Figure
  8. Hgroup
  9. Section
  10. Address
  11. Footer

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

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles

Enjoy this post? Subscribe by RSS or Email

Tutorials

  • http://zlwo.com Reza

    Very useful post. Thanks for sharing.

  • Pingback: 解读 HTML5:建议、技巧和技术 - 幸福收藏夹

  • Pingback: 给HTML5的建议、HTML5的技巧和技术 | 实时信息(shtion.com)

  • Pingback: 解读 HTML5:建议、技巧和技术 | FEDEV

  • Pingback: 解读 HTML5:建议、技巧和技术 | 田园牧歌

  • Pingback: Soun's Blog » Blog Archive » 解读 HTML5:建议、技巧和技术。

  • http://ferienhausnormandie.com Gaz

    There are a couple of html5 themes available from WordPress.org which are awesome, like Toolbox and Just CSS. People should check them out

  • http://www.expertreviews.com zoom

    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 =-.

  • http://www.securityking.com Craig

    Excellent article, and just learning a few pieces of code for html5, so thanks for some new information and tips! Very helpful.

  • http://www.designisnowhere.com/ Paulchen

    Good post for me as a coding beginner, html5 is easy and simple to understand.
    .-= Paulchen´s last blog ..Hundreds – Solace =-.

  • http://www.veztekusa.com Paul Harris

    nice explanation

  • http://www.deutsched.com Amr Boghdady

    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 =-.

  • http://www.howtocopygames.com Kelly

    A big part of the work on HTML 5 is actually just fixing HTML 4 problems..
    .-= Kelly´s last blog ..Copy Any Game =-.

  • http://www.vdw-subsidiedesk.nl/wva.htm wva

    I really need to get started with html5, specially the replacement for flash is great for use on mobile phones, ipad etc.

  • mahasiswa

    I’m new in htlm5 but keep on learning…thanks for this nice article

  • http://www.dvdcopyreview.com Bent Lee

    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.

  • http://www.livefeeds.tv Clarise

    IE currently requires a Javascript hack to use new HTML 5 structural elements.

  • http://theworkpot.com marcus ollison

    I basically just learned html coding, this would be a nice addition.

  • Pingback: 解读 HTML5:建议、技巧和技术 - yhkyoの程序员修炼之道 – yhkyo.com

  • Nova

    I am a beginner in this html coding, and this article really helping me a lot. Thanks for sharing this one..

  • http://www.alphahostbg.com John Freeman

    Nice and clean, @Clarise do not worry man, the end of IE is soon, the percents of users using IE decreases every day.

  • Gemma

    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.

  • http://www.webdesignfunda.com/ CYNTHIA NELSON

    awesome post, really useful for the learners. thanks.

  • http://www.nursejobsnow.org Shelly

    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.

  • Pingback: HTML yay or nay … | thomasworks

  • http://searchlink.ca SearchLink.ca

    I’ll be celebrating when this is standard. Someone commented here that HTML5 still cannot replace Flash and I agree with this. However, HTML5 is still a step in the -right- direction; which I believe to be a step away from Flash in general.

  • Pingback: The ultimate HTML5 resource guide « iTechTunes