Tuesday, May 10, 2011

HTML5 introduction

HTML5 Introduction

HTML5 is the newest major revision of HTML. It's goal is to improve semantics, efficiency, and usability of web development as well as the deployment and usability of the World Wide Web. This document covers the changes in HTML5 as compared to the XHTML 1.0 specification. It is important to note that XHTML is only a part of HTML5. HTML5 encompasses other styles of semantics and syntax.


The first change in an HTML5 document is it's doctype declaration. Recall that this is what the XHTML 1.0 Transitional doctype looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

For HTML5 the doctype is much more simple:

<!DOCTYPE html>

That's it. It's even possible to remember it! Note, also, that HTML5 is not case sensitive, so the doctype can potentially be written in any variation of lower and upper case letters. We are, however, focusing on XHTML syntax, so everything in this document will be lower case with closed tags and quotes around attribute values.

XHTML Namespace

In XHTML 1.0 we used the following namespace to say that the elements in the following page are in the XHTML namespace:

<html xmlns="http://www.w3.org/1999/xhtml">

This is no longer required in HTML5 as it uses that namespace by default. That means that we can drop the entire attribute:


Link element

In the scope of CSCE102 the link element is used for linking in the external stylesheet:

<link rel="stylesheet" type="text/css" href="mystyles.css" />

Because the rel="stylesheet" attribute already defines that we are using CSS rules the types attribute becomes redundant (there is only one stylesheet language on the web) and is made default in HTML5, whenever the rel="stylesheet" is used. That means that it is no longer needed:

<link rel="stylesheet" href="mystyles.css" />

New Elements

HTML5 introduces a number of new elements. In the following section we will cover the header, nav, section, article, footer, hgroup and aside elements. The goal of these new elements is not to completely remove the div tag for creating layouts, but to better define the content of a web page.

header - From the HTML5 spec: "The header element represents a group of introductory or navigational aids." The header can define the main web page header information or it may define a smaller header for an article or section elements. It may include heading tags, logos, and navigation. A section's table of contents or search form may also be wrapped with a header tag.

<h1>HTML5 Tutorial</h1>
<li><a href="home.html">Home</a></li>
<li><a href="intro.html">Introduction</a></li>

The above example shows one possible way to use the header element - define the beginning of a web page with a heading tag and a navigation menu. nav - The nav element represents a section with navigation links. It is suitable for navigation or table of contents. The nav element can be used for the main navigation area of the page as well as the smaller navigation areas, such as the copyright, terms of service, etc. information which may go in the footer.

section - The section element represents a "generic document or application section." The HTML5 spec further points out that the section element is a "thematic grouping of content, typically with a heading." This specifies that the section element should not be used as a replacement of the div tag. It is used to split the content of the web page into thematic sections - for example splitting different topics about different computer scientists into different sections:

<h1>Tim Berners-Lee</h1>
<p>British engineer and computer scientist credited with inventing the World Wide Web</p>
<h1>Charles Babbage</h1>
<p>British mathemetician who originated the concept of a programmable computer.</p>

More information from the HTML5 Specification document:

"The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead."

article - The article element wraps around the content which is meant to be independently distributable and reusable. Ask yourself - if I take out what I have inside the article element and give it to someone, will they be able to clearly understand the content? The article element is likely to have a header element, it may be split into sections using the section element and may have a footer. An article element can also be nested as long as the content is related. The HTML5 spec gives some examples of  uses for the article element:

"This [article element] could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content."

footer - The footer element "typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like." This means that a web page may have more than one footer. There may be a footer for the entire site with the copyright data and footers for each section with references, authors, etc.

hgroup - The hgroup element allows for grouping of the heading tags:

<h1>CSCE 102</h1>
<h2>General Applications Programming</h2>

The main purpose of the hgroup element is to specify that all heading elements in the hgroup element belong to just one heading and not several. I.e. the sub headings simply act as secondary titles.

aside - The HTML5 spec does a great job of defining the aside element:

"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 element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered seperate from the main content of the page."

html5 spec - http://dev.w3.org/html5/spec/Overview.html
w3schools - http://w3schools.com/
html5 doctor - http://html5doctor.com/
ListApart - http://www.alistapart.com/articles/previewofhtml5