HTML5

HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make our pages more semantic.

This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone.

In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more..

 

This video will go through all of the features listed in this page.

The HTML Tag

The HTML tag has gotten easier to use since xHTML.

This was XHTML-


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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


All you have to declare now is-

 

<!doctype html>
<html lang=en>

Thats all, your document is HTML5 ready.

 

This video will show you how to write a proper HTML5 doctype.

The HEAD Tag

The HEAD tag hasn't changed much from xHTML.

It still holds script and meta information.

 

This video will show you how to declare a correct HEAD tag, as well as an external style sheet, and meta tag information.

The HEADER Tag

The spec for the HEADER is that it is used to hold <H#> elements, and navigation aids.

Remember, you can use the HEADER tag multiple times in different sections, as long as it holds the required information.

 

This video will show you how to use a header with a NAV element.

The FOOTER Tag

In HTML5, the footer is used to contain copyright information and small navigation links.

 

This video will show you the correct way to add a HTML5 footer.

The ARTICLE Tag

The W3C definition for Article:

 

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This 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.


Article information, using articles in sections

 

This video will show you what the article tag looks like wrapped around some paragraph text.

The BLOCKQOUTE Tag

 

Blockqoutes are good to have when you want to reference something like a citation or to display comments.

 

This video will show you how to use the Blockqoute tag.

Thou look’st like antichrist, in that lewd hat.

The ASIDE Tag

Understanding ASIDE

A way to think of ASIDE is how William Shakespeare used this as a dramatic device in which a character speaks to the audience.

 

In Web, we use this as a device to display pull-quotes, a glossary or even related links.

 

This Video will show you how to add the ASIDE tag properly.

 

The MARK Tag

What is the mark tag?
The mark tag is basically a highlighter. It is new to HTML5!

Examples of the mark tag-

 

Despite the stockmarket crash in 2008, the value of my share portfolio increased by 100 percent . I must be doing something right.

I should point out that the value only increased because I kept pumping more money in!

 

This video will show you how to use the new HTML5 MARK tag.

The CANVAS Tag

The CANVAS tag is really special. It allows for bitmap graphics to be drawn directly on the screen using the script tag.

 

Below is an example of some shapes drawn with Javascript on a HTML5 canvas.

 

This video will show you how to add a canvas tag and draw bitmap data with JavaScript.