After reading this fantastic book on front-end development I decided to write a little blog post on the main HTML5 elements. At university I always used to write an essay after I had read something to see if it had stuck in my memory. It seemed to have worked so here we go again….

Firstly it is important to understand that HTML5 is not a new markup language but an improved version of HTML4 and XHTML. It hasn’t fully captured the attention of all web designer/developers or been approved by W3C but it’s here, widely supported and in time will become standard procedure.

Let’s start with the DOCTYPE.

Yes that’s it. No version number language or URI.

It’s not the only thing that has got shorter in HTML5. Check out character encoding and linking external CSS and JS.



HTML5 introduced several new elements which should improve the markup of web pages. How often do we see the following:-



There is no real sematic meaning in that code and it is not machine-readable. The header class is treated no differently to the main-body. Introducing new elements HTML5 has improved the layout of web pages and given us cleaner sematic code.

In 2005, Google surveyed a shed load of web pages to establish which ID and class attributes were the most common. Their findings then became the names of the new HTML5 elements which are now widely supported in most browsers. They include:-

  • Section
  • Header
  • Article
  • Footer
  • Aside
  • Nav
  • Figure

That’s not all of them. But that’s all I’m going to write about. If you want to find out about all of them have a read here.

Section







There is nothing wrong with the above markup. We can see a clear distinction between the sections of the page but the browsers don’t. They just render them as block-level containers.

By using the section element we can move away from using generic container and move onto sematic sections. They can be transformed into distinct parts of a document.







Article

The HTML5 article tag defines a individual post, story or piece of news. It differs from a section as an article can stand apart and make sense on its own (for example in a RSS feed). A section is a part of a webpage that could contain several articles. However it does get a bit confusing. Articles can also contain sections. For example.

  

    

 

 

  

   

   

  

 

Header

The header element defines the branding area/masthead of the page. The header might not always be at the top though. It could be at the side, bottom or anywhere on the page.

However we aren’t restricted to one header on the page. Headers can also be added to sections and articles. I have also include a hgroup element in the code. It basically is a group of h1-h6 elements.

 

 

  

Website name

   

The website subtitle

 





 

  

   

A shoes article

  

 



 

  

   

Trainers section

  

 

Footer

The above is a very common sight. HTML5 gives us the opportunity to replace that with footer. Again the footer does not have to be at the bottom of a page. It could go anywhere including in sections and articles

 

  

The title


The author

Aside

This is a tough one to explain but I will try my best.. If I wrote an article and wanted to including some bullet points that were related to the article I would add them into an aside element. The biggest misinterpretation is that it is a sidebar. The sidebar could be wrapped in an aside tag but only if it is related to its container element. If you’re still confused read the official HTML5 description.

“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.”

 

  

The name of a stadium

 

 

  
Other stadium names
Other stadium names

Nav

Pretty self explanatory. Nav tags should be reserved for primary ways that people navigate around a website whether that is in the header, footer or sidebar.

 
  • Home
  • About
  • Contact

Figure

Figures such as Media, images, charts and diagrams are often paired with written captions. It’s impossible to associate the two. Until now. Figure can be used alongside figcaption to link the two together.

 

  A image of me!

And there you have it. Some basic HTML5 elements. It’s quite easy to see how useful the language is and that the future is bright with HTML5. I would recommend for anyone to have a good read of http://html5doctor.com/ for a good insight in the language.

Thanks for reading

Shane

You may also like