It’s been way too long since we’ve posted anything. With all the news around HTML5 and CSS3 that continues to come out, I thought now might be a good time to talk about some things we will see in the upcoming HTML5 standard.
HTML5 Doctype
The doctype has been simplified in HTML5. Now all you have to do is add the following doctype and your page is HTML5 ready.
<!doctype html>
HTML Structure Tags
The HTML5 standard recognized that most web pages have several type of elements in common. It added more semantic tags to handle these elements. In the previous standard we would use the div tag, but now there are several more descriptive tags available:
- header – this tag is commonly used to identify the header of the page. However, from what I see in the specification, there is no reason this tag could not be used to denote the header of other content, such as a blog post.
- footer – the footer tag can be used to define the footer of the html page or the footer of another element.
- nav – the nav tag is short for navigation. The intention of this tag is to be used for major intersite navigation. Therefore I think it is best used for your site naviagtion (home,contact,about us, etc) but not for use to link to outside side such as you would see in a blogroll.
- section – used to divide your page into sections. You may see this tag used in a blog to contain several blog posts.
- article – defines a particular article in a page. I see this tag being used to contain individual blog posts within the seciton tag.
- aside – right now aside is to be used to define other content on your pages that are not apart of the main content. The only real use I’ve seen is for side bars
- figure – defines an element that is related to your article. Something like an image or diagram. This also allows for use of the figcaption element to add a caption to the parent figure.
- mark – used to define an inline content that marked in some way. Could possible replace strong in some cases.
- time – used to indicate a time value
- meter – used to indicate a portion of a range. Such as a percentage of free space.
- progress – can be used to indicate the completion of a task
Dynamic Pages in HTML5?
HTML5 has added some elements that take care of commonly used dynamic functions that would commonly be created using javascript.
- details – provides details about an element. This would be like tooltips in non-Web applications.
- datagrid – creates a table that is built from a database or other dynamic source
- menu – an old tag brought back and given new life allowing you to create a menu system on your Web pages
- command – defines actions that should happen when a dynamic element is activated
New Multimedia Tags
- canvas – allows you to create dynamic graphics within your page.
- video – tag used to add video
- audio – add sound or music using the audio tag
We’ve just barely scratched the surface of the upcoming standard. In the future we’ll take a deeper look into HTML5 and CSS3. Also I hope to post some examples of how to use these new tags.
Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.