HTML5 new elements to define page content and structure

G’day,

Following up on my previous post http://jaspreetchahal.org/html5-introduction-and-tutorials-cookbook-style-series/ where I give a brief insight on what HTML5 is and I started a cookbook style series to explain few things. The posts will stay to the point and will ask you to explore more.

Ok! So lets talk about new elements introduced in HTML5. I will only list most popular ones and are being used now.

Here is the list of new elements (this is not a complete list but one that I think you should know at least, please check this resource)

  1. <article> – defines an article
  2. <header> – header section
  3. <nav> – website navigation goes here
  4. <section> – defines a section on a web page
  5. <footer> – footer of your website
  6. <aside> – content that is on side. mainly used for sidebars
  7. <hgroup> – Group h1 – h6 when multiple headers are used.
  8. <details> – for showing and hiding details of certain information
  9. <mark> – highlighted text
  10. – defines sound content
  11. <video> – defines movies or playback content
  12. <canvas> – this is awesome addition and allow you to draw directly on a section on your webpage through Javascript
  13. <figure> – wraps an image and its description
  14. <figcaption> – Caption given to an Image
  15. <embed> – If you want to host external application written in other languages.
  16. <small> (updated from THML4.1)

 

Ok so thats my list but remember there are heaps of other tags that you should be aware of but elements such as of progress, meter, etc are not supported in Internet explorer. We will talk about canvas element in cool set of tutorials to come. but lets concentrate on few of the above mentioned elements that defines (semantic structure) our web page.  You are not forced to use any of above elements but the mentioned elements gives semantic meaning to your page content.

Lets now create a full fledge page using our above mentioned elements, that will give you more understanding how these works.

Problem: Create a new page layout using HTML5 elements

Ok so cookbook style posts are not there to discuss what each element does but rather focus on problem and then come up with a simple solution.

The solution below in no way represents coverage of all HTML5 new elements but rather focus on structure and tries to show how new elements can be used.

Demo

http://jaspreetchahal.org/examples/html5/html5-new-elements-example.html

Use Chrome, Opera, Safari or IE9+ for above demo

Now lets do a post mortem of above code that highlights the usage of many new elements

Header element as you can see defines our header. I guess its semantically correct to say which part of our site is header. Header can be part of any section or article that is highlighted in the code above.

We made use of section element to define one of our sections. You can create as many sections as you like. You can have sections within other sections.

We also used aside tag to clearly indicate what content appear on side as you can see.  

We also use nav element to indicate what anchors defines our navigation.

We have used footer element to define our footer. You can use footer within anyother element as long as you know why you are putting it there. Its all about defining your document.

Elements above are defining your page but they are not styling them at all. But they are more of indicators to browsers how things should be interpreted on your page. say for example video and audio will be processed as normal elements and display text within if your browser don’t support them else its an indication for browser to display either video or audio respectively.

Remember that there are many html5 elements that defines your content and wont style them. use CSS styles to style them. But there are many elements that comes with default style definitions too such as H1,H2,H3, strong, em, small etc.

figure and figcaption elements

Consider this markup

figure element groups your Images and Caption associated with those. If I apply styles below

 

 

Nothing fancy above and I will get this result.

HTML5 figure and figure caption exampel

Now you can give it a more touchy feeling with your CSS styles.

canvas element will be explained with API in upcoming post. This post was written to give you insight on how to put new elements that defines page structure to work. Click on each element in the list above and you will be take to resource that explain each element in depth.

If you wish to add something to this post please leave your comments.

There is so much to say that I am now sure how should I put everything in writing.  Thats why I chose Problem/Solution style. I will only write bare minimum to understand the functional and structural significance of certain HTML5 features rather than explain the API.

I hope this helps and in next post I will cover some more elements such as details, time, address, mark, progressbar, meter etc  and I will also tell you which elements has been removed from HTML5.

IE9 or older is notoriously bad with HTML5 support. I suggest that you include html5shiv.js on your pages. You can get it from https://github.com/aFarkas/html5shiv. This script is the workarond to enable use of HTML5 sectioning elements in legacy Internet Explorer and older versions of Safari and Firefox.

Thanks for you support and I think I will get better with writing in upcoming posts.

Cheers,

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.