HTML5 Revisited

In my last blog post I talked generally about HTML5 and the new elements that make marking up content more semantic and other new features. In this post I will be revisiting some of those topics in more detail.

The future is more semantic

If you’re familiar with past versions of HTML, such as HTML 4 and XHTML 1.0 strict you know the semantics of containers, divisions, the 6 levels of headings, lists, forms and footers. HTML5 presents an updated way to mark up this code.

Structural Elements

The structural semantic elements are what we know as block level elements that break up and organize the content on the page. The elements we are used to are the divisions, h1-h6, form, fieldset, table, ul (unordered lists), ol (ordered lists), and dd (definition lists).

Click here for more HTML 4 block level elements.

In HTML5’s attempt to simplify the use of ID’s and classes, new structural elements have been born.

example of HTML5 elements in use

The section element represents a section of a document and would be similar to a division, section is more semantic, but whether you choose a div over a section is dependent on the content.
The header element represents the header of a section. It’s meant to be used as a container for a group of introductory content or set of navigational links. The header can be used multiple times on a page and contain more than one h1 unlike in HTML 4 when there is typically supposed to be one h1 per page.
The footer represents the footer for a section or document. It should contain information about it’s containing element. It can also be used multiple times per page.
The aside is an element that is used for content relating to the main text of a document. To know whether if the content goes into an aside, consider if the information can be removed for the document and does not change the meaning. If this is true, then the information can go into an aside.
The Nav is used to hold a collection of navigational links that usually belong in the header. Note: not all links belong in a nav element.
The article element represents a section of content that forms an independent part of a document or site.

Text-Level Elements

Text-level semantics are what we currently know as inline elements; HTML5 has added some new ones.

The mark tag is used to to highlight or reference a run of text due to it’s relevance in some other context.
The mark tag is used to to highlight or reference a run of text due to it’s relevance in some other context.
The meter tag is used to markup measurements, specifically a scalar measurement within a known range.
The progress tag is used to markup values in the process of changing. For example,

HTML5 audio and video

Another thing I briefly mentioned in my last blog post, is that with HTML5 you can add video right into the HTML without the need of a plug in, or a non validating embedded tag.

This is possible with a simple video tag. Adding a video tag into HTML5 has simplified the code a lot. For example,

HTML4 video code.

example of HTML5 video code

Another benefit to adding a video tag is that the video is consistent amongst browsers unlike many plug-ins and can also now be styled with CSS.

Although HTML5 video is a very beneficial thing for the web, there are some things that can’t be used with this new feature and creates some issues with copyrighted material. Copy material should not be used as a video tag, because it becomes accessible to the public and can be downloaded just as easily as copying a .jpg to your desktop.

I found video.js when looking for examples of html5 videos and I thought this was a good example of a site built with html5 and showing a video as well. The information under the video is very useful as well when wanting to know more information and how to implement a video using HTML5.



One thought on “HTML5 Revisited

  1. Thank you for the thoughtful review. The main advantage of html5 player seems to be for embedding rich media such as audio and video in modern browsers. Although, the structure elements seem to be useful. CSS3 seems to be headed in the right direction, leaving many possibilities for implementation and creativity,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: