HTML5 and Semantic Markups

I just got a book from called HTML5 & CSS3 For The Real World.   Published by Sitepoint, this book is a wonderful read.  The still-evolving new HTML specification has a lot of semantic markups that help web authors add meaning to the various components of a web page.  These semantic markups not only give meaning to the structure of an HTML document but also aids in styling of the page.

HTML5 is not just about fancy features.  It’s also about building HTML documents that make sense when analyzed for structure and design.  One aspect of HTML documents that is important is the outline of the document contents.  To aid in authoring HTML5 documents, there are some tools that analyze the documents’ structure.  One of these tools is the HTML5 Outliner,  which takes advantage of the outline algorithm for HTML5.  Try using it in your HTML5 projects and experiments to see if you have a semantically correct HTML document.

It is also important to understand the meaning and use of the various HTML5 markup elements.  Their use determines the logical structure of a document, aside from the styling.  There are certain HTML markup elements that should only be used in certain contexts.  One case is the use of the <em> and <strong> tags.   While <em> is used for emphatic stress, <strong> should be used for a span of text that has strong importance.

The proper and canonical use of HTML5 markup elements should be of concern to today’s web authors.  Reading the HTML5 specs carefully, even if they are still evolving,  is a good thing.  It’s best to future proof your HTML projects now.   See the Website Design and Construction page of this site for links to helpful resources.