Html Introduction

What is HTML and Why HTML/HTML5?

HTML, or Hypertext Markup Language, is used to create web pages. Site authors use HTML to format text as titles and headings, to arrange graphics ,forms on a webpage, to link to different pages within a website, and to link to different websites.

HTML is an abbreviation of "HyperText Mark-up Language" - In this tutorial you will learn so-called XHTML (Extensible HyperText Mark-up Language) which, in short, is a new and more well-structured way of writing HTML.

How HTML is used to Create a Web Document

HTML is a set of codes that a website author inserts into a plain text file to format the content. The author inserts HTML tags, or commands, before and after words or phrases to indicate their format and location on the page. HTML tags are also used to add tables, lists, images, music, and other elements to a webpage.
Web documents contain three main sections: the head, title, and body. The head includes the webpage’s identifying information, including the website’s title and important keywords. The viewer sees the site’s title, but any other information is hidden. The site’s title appears in the browser’s tab and is what appears when a user tries to bookmark a site. The body section is the main portion of the webpage visible to the viewer, including the text and graphics. HTML tags are also used in two additional ways that are not visible to the viewer: as meta tags and comments. Meta tags indicate keywords associated with the webpage to search engines. Comments are intended as explanation or additional information for other writers or readers of HTML code.
Website authors do not need to write HTML code themselves to create a webpage. Using an HTML editor, site authors design web documents while the program writes the HTML code. A WYSIWYG (What You See is What You Get) HTML editor is a software program with an interface similar to a word processing program that site authors use to write and format text and position graphics as they will appear on the webpage.

STEP 1: Let's get started

I will explain and show what you need to create a html  based website .

What is needed?

I am sure every computers has everything you need to create a website. let we check

WINDOWS OPERATING SYSTEM
BROWSER (ANY BROWSER, The most common is Microsoft Internet Explorer. But there are others such as Opera and Mozilla Firefox and they can all be used)

Note: It is not important which browser you use.

There are lots of tools available like Microsoft Expression,Microsoft FrontPage, Macromedia Dreamweaver or even Microsoft Word, which can create websites for you easily without writting html but i don't suggest beacause they are not of any help to you when learning how to create wensite with writting code. Instead, you need a simple text editor. If you are using Windows you can use Notepad, which is usually found in the start menu under Programs in Accessories: or you can fallow below steps to create webpage:

How to find Notepad

How to find Notepad

How to find Notepad

How to find Notepad

Finally, when you double click on firstwebpage.htm or open in browser,you will see below blank webpage

How to find Notepad

Till now, we have created blank wepage

If you are not using Windows, you can use a similar simple text editor. For example, Pico (Linux) or TextEdit (Mac).

Notepad is a very basic text editing program which is excellent for coding . A browser and Notepad (or a similar simple text editor) are all you need to go through this tutorial and make your own websites.

STEP 2: Write your Html Document

I will explain and show what you need to write html code.don't worry it is not really completed code just english words :).

What is needed?

Elements and tags


You are now ready to learn the essence of HTML: elements. Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consists of a start tag, some content, and an end tag.

"Tags"?

Tags are labels you use to mark up the begining and end of an element.

All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">". Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.

HTML is all about elements. To learn HTML is to learn and use different tags.

Now we are ready!

What can I do?

Let us start with something simple. How about a page that says: "Welcome to my first page! This is my first website." Read on and you'll find out how simple it is. HTML is simple and logical. The browser reads HTML like you read English: from the top down and from left to right. Thus, an simple HTML document begins with what should come first and ends with what should come last. The first thing you need to do is to tell the browser that you will "talk" to it in the language HTML. This is done with the tag <html> (no surprises there). So before you do anything else type "<html>" in the first line of your document in Notepad. As you may recall from the previous lessons, <html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. So to make sure you don't forget the HTML close tag now type "</html>" a couple of lines down and write the rest of the document between <html> and </html>. The next thing your document needs is a "head", which provides information about your document, and a "body", which is the content of the document. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).

Your document should now look like this:

<html>

<head>
</head>

<body>
</body>

</html>

Note how we structured the tags with new lines (using the Enter key) as well as indents (using the Tab key). In principle, it does not matter how you structure your HTML document. But to help you, and others reading your coding, to keep an overview, it is strongly recommended that you structure your HTML in a neat way with line breaks and indents, like the above example.

If your document looks like the above example, you have made your first website - a particularly boring website and probably not what you dreamt of when you started this tutorial but still some sort of a website. What you have made will be the basic template for all your future HTML documents.

So far so good, but how do I add content to my website?

As you learnt earlier, your HTML document has two parts: a head and a body. In the head section you write information about the page, while the body contains the information that constitutes the page.

How to find Notepad

For example, if you want to give the page a title which will appear in the top bar of the browser, it should be done in the "head" section. The element used for a title is title. I.e. write the title of the page between the opening tag <title> and the closing tag </title>:

<title>My first website</title>

Note that this title will not appear on the page itself. Anything you want to appear on the page is content and must therefore be added between the "body" tags.

As promised, we want the page to say "Hello! This is my first website." This is the text that we want to communicate and it therefore belongs in the body section. So in the body section, type the following:

<p>Hello! This is my first website.</p>

The p in <p> is short for "paragraph" which is exactly what it is - a text paragraph.

Your HTML document should now look like this:

 
<html>

<head>
<title>My first webpage </title>
</head>

<body>
<p>Hello! This is my webpage.</p>
</body>

</html>

Done! You have now made your first real webpage!

Next all you have to do is to save it to your hard drive and then open it in your browser:

  1. In Notepad choose "Save ..." under "File" in the top menu.

Now go to the browser:

  1. In the top menu choose "Open" under "File" (or press CTRL+O).
  2. Click "Browse" in the box that appears.
  3. Now find your HTML document and click "Open".

It now should say "Hurrah! This is my first website." in your browser. Congratulations!

If you absolutely want the whole world to see your masterpiece right away, you can jump to Lesson 13 and learn how to upload your page to the Internet. Otherwise, be patient and read on. The fun has just begun.

Can you show me some examples?

Okay, the element em emphasis text. All text between the opening tag <em> and the closing tag </em> is emphasised in the browser. ("em" is short for "emphasis".)

Example 1:

<em>Emphasised text.</em>

Will look like this in the browser:

Emphasised text.

The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"), where h1 is the first level and normally the largest text, h2 is the second level and normally slightly smaller text, and h6 is the sixth and last in the hierarchy of headings and normally the smallest text.

Example 2:

 
<h1>This is a heading</h1>
<h2>This is a subheading</h2>

Will look like this in the browser:

This is a heading

This is a subheading

So, I always need an opening tag and a closing tag?

As they say, there's an exception to every rule and in HTML the exception is that there are a few elements which both open and close in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels, for example, a line break which looks like this: <br />.

Should tags be typed in uppercase or lowercase?

Most browsers might not care if you type your tags in upper, lower or mixed cases. <HTML>, <html> or <HtMl> will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.

Where do I put all these tags?

You type your tags in an HTML document. A website contains one or more HTML documents. When you surf the Web, you merely open different HTML documents.

And what is HTML5?

Then what is the difference between regular HTML and HTML5? We will look into this question throughout the tutorial, but one thing that is important to note is, that anything you might have learned about HTML is still valid when it comes to HTML5 – you don’t have to throw anything away. HTML5 consists of a whole lot of new features and we will look into the individual features along the way. But actually, HTML5 is not the just the fifth version of HTML – HTML5 was originally created by a group of people who was not in charge of the official HTML standard. To understand the coverage of HTML5 is no easy job – the real problem is, that a lot of people use the term HTML5 when what they actually are referring to is ”HTML5 and all its related standards, such as CSS3”. In this tutorial the focus will be on the core HTML5 features and who you use them and where they differ from ”the old” HTML 4. When using HTML5 you need to know that not all the new features are supported by all browsers –Different browsers support different features and therefore you will have to do some tricks to make some of the elements of HTML5 work correctly. But one thing is for sure – HTML5 is the future, that how webpages are going to be build, Apple and Google support a great deal of HTML5 features already, The World Wide Web Consortium has given up their own work of the next generation of xHTML to support HTML5, so let’s get started!

The Structure of HTML

Before starting to use HTML it is important that you understand the structure of HTML. As HTML is a markup language, you use it to mark up different parts of your content - kind of like when you are using a highlighter.

HTML Elements

HTML is constructed of elements and it is these elements you use to do your markup. Below is an example of how you could mark up a regular text-paragraph.

<p>This paragraph is part of my content</p>

What we have here is a sentence (”This paragraph is part of my content”) which have been placed between <p> and </p>. The <p> and the </p> is called tags. Every tag consists of a <, an abbreviation, and a >. In this case, p is an abbreviation for paragraph. Combined, the <p> and the </p> tags create an element. Every HTML-element starts with an opening tag (in this case, that is <p>) and most have a closing tag (that is </p>). Inside the opening and the closing tag of your element is the actual content.

Empty Elements


Most HTML-elements looks like the <p></p> element, but some are what we call empty elements. The line-break element is such one and looks like this:

<br />

As you can see, there is no closing tag and the element do not contain any content, therefore it is called an empty element. Because this is an empty element it is closed at the end of the tag – that’s the /. You don’t have to use the ”/” at the end of an empty element, but it is considered good practice, so you might as well get used to it. (As I said before, the tag consists of an abbreviation and in this case br stands for break).
When the browsers read your HTML5 document they don’t care whether or not you write your tags in uppercase or lower case. But other developers do! Even though you could write the same linebreak-tag in a lot of different ways, such as these:

<BR />
<bR />
<Br />
<br />

It is considered good practice to write all your tags in lowercase – in increases readability, and it is just considered good craftsmanship to write your tags this way.


What you have learned so far:

  1. An HTML element starts with a opening tag
  2. An HTML element ends with a closing tag
  3. A HTML tag starts with a < and ends with a >
  4. The letters between the < and > are abbreviations
  5. The element content is everything between the start tag and the end tag
  6. Some HTML elements are empty
  7. Empty elements are closed in the start tag
  8. Make it a habbit to type all your tags in lowercase - it is considered good practice

Your First Webpage


Here is an example of one of the simplest HTML5 documents you can create. It starts with the HTML5 doctype, followed by a page title and then followed by some content, in this case a single paragraph.

<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>

You should have an idea of what this would look like in a browser – The title of the document, "Your first HTML5 Document" and the text "Okay, now we’re going somewhere!" written at the left top of the page. The doctype declaration tells everyone that is reading the document that HTML content follows.

<!DOCTYPE html>

If you have looked at the markup of HTML documents before, you might have seen a doctype declaration that looked a lot like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Even professional webdevelopers copy and pasted this long doctype from one document to another – the new simpler doctype is easy to remember and as no specific version is declared, all new future features are automatically available to your page.

What is the DOCTYPE for?

But why is there a doctype at all? All browsers have two different ways of reading your document – standard mode and quirks mode. If you don’t tell them what kind of document they are handling, the will go into quirks mode. Think of this as the old way of reading your document – there might be some flaws and you can be sure that not all browsers read your document the same way. Declaring a doctype forces the browsers to go into standard mode – the "new" way of reading your document. Using standard mode, most browsers will read your document the same way and they will actually understand what you are writing.
To make the HTML5 document easier for yourself to understand, you would want to use the two section-elements <head> and <body>. Using these sections you clearly separate the information about your page (the head) from the actual content (body). Using these, you webpage would look like this:

<!DOCTYPE html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>

What just happened with the indenting, you might think? Whether or not you want to use indenting is your own choice but it visualizes the structure of your page and makes it easier to see at a glance. The last thing you would want to add is the <html> element and it is placed right after the doctype-declaration.

<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>
</html>

Congratulations you’ve just created your first HTML5 webpage! Did you notice how the <p> element is inside the <body> element? That is called nesting elements and it is a very essential part of the HTML structure. I will leave it at this for now, but I just wanted to introduce to you the idea of nesting elements.
What you have learned so far:

  1. Always declare the doctye - <!DOCTYPE html>
  2. Use the element <head> to separate the information about your page
  3. Use the element <body> to separate the actual content of your webpage
  4. Using <html>, <head>, and <body> is a matter of style when you use HTML5, but it makes the structure of the page clearer to you.
  5. Indenting your markup makes it easier to comprehend
  6. You can nest one element inside another element

Block & Inline elements


We have looked at some of the HTML5 elements a webpage is constructed of and now it is time to introduce yet another property of the HTML5 elements. There are two different types of elements – inline elements and block elements. Whether an element is an inline or block elements affects how the browser render the element.

Block Elements

A block element is rendered, as the name indicates, as an actual block. The block-element is as wide as it can possibly be, a rectangular that Hakims not break across lines, and the width and height of the element can be regulated. Block-elements may contain inline elements and other block-elements.

Inline Elements

The inline elements are treated as a part of the flow of the document and the size should normally not be changed manually. Only inline elements may be contained with inline-elements. And to make even more confusing, inline elements are the only elements that may be contained within a paragraph-element, even though the <p>-element is a block-element.

The <p></p> element is a block-element, whereas the <b>-element is an inline-element. (b stands for bold and changes the appearance of the text)

Examples

The most commonly used block-level element is the <div>. (Div is an abbreviation of diversion). The <div> element is a block-element used to separate the different types of content on your webpage. Imagine you have two blog entries, consisting of the actual entry, a title, your name, and a publication date, it might look like this:
Just Another Day
Written by Hakim
On January 11th
This is my content, just  wanted to check in on you

My Blog Entry
Written by Raja
On January 11th
I’m so happy to write my first blog entry!
As you can see, there is two blog-entries and we divide them using a block element - in this case is chose a <div>. Inside the block element is another block element, the paragraph (<p>). Using just only the most necessary markup, the HTML for your webpage would look like this:

<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<div>
<p>Just Another Day<br />
Written by Hakim<br />
On January 11th
</p>
<p>This is my second blog entry, and I just wanted to check in on you
</p>
</div>
<div>
<p>My First Blog Entry<br />
Written by Raja<br />
On January 20th
</p>
<p>
I’m so happy to write my first blog entry !
</p>
<div>
</body>
</html>

The <div>-elements is used to diversify the two blog entries. Inside each of the <div>-elements is two paragraphs consisting of title & author and the actual entry. The <div> element is widely used as a container that can apply formatting anywhere you want on your webpage. The limitation is that the <div> elements do not tell you anything about the actual content. So the browser knows that it has found a separate section, but not what kind of section. In HTML5 a lot of new elements have been introduced and some of them are here to replace the use of the <div> - see the articles about the new semantic elements to dig in to semantic markup. I have previously talked about nesting elements and the fact that the <p> elements is inside the <div> elements is an example of nested elements. What you have learned so far:

  1. Block elements are like squares
  2. Inline elements have no breaks associated with the element
  3. You can nest block elements inside other block elements
  4. But you cannot nest block elements inside inline elements
  5. The paragraph is the only block element that must only contain inline elements
  6. The <div> elements is currently used as a container, but new HTML5 elements is here to change that

Attributes

A lot of the HTML5 elements can have attributes. The attribute provides additional information about the specific element, and they are always specified in the opening tag. Here’s an example – let’s say you want to create a link. The link element is specified by the <a> tag and the destination-address is specified in the href-attribute.

<a href="http://www.myurl.com">This is a link</a>

As you can see, the link-element consists of the opening tag <a> and the closing tag </a>. The content of the link-element is "This is a link". But inside the opening tag is an attribute, href. The href-attribute always has a value, in this case http://www.myurl.com. Every time you have an element with an attribute, the pattern for writing attributes are attribute="value".
Here you have to note, that the attribute name is followed by a = and the value of the attribute is always surrounded by "". In HTML5 you can actually omit the quotation marks as long as the value Hakimsn’t include a restricted character (such as >, =, or a space), but this increases the risk of errors – let’s look at the image-element to exemplify this.

<img src="my-cat.jpg" alt="This is a picture of my cat, Rani">

If you look at the alt-attribute (alt is an abbreviation of alternate text) there is several words. This is no problem when you are using quotation marks – the quotation marks indicate that everything in between is the value of the alt-attribute. But because space is a restricted character you cannot write it like this:

<img src="my-cat.jpg" alt=This is a picture of my cat, Rani>

If you did, the browsers would presume the value of the alt-attribute to be just "this" and the rest of your intended alt-text ("a picture of my puppy, Bob") could break the rest of your page. What you have learned so far:

  1. Some HTML elements can have attributes
  2. The pattern for an attributes is attribute="value"
  3. Attributes provide additional information about an element
  4. Attributes are always specified in the start tag
  5. You don’t have to use the quotation marks, but it is a really good idea

Hopefully you understand the basics of HTML by now, and therefore we are ready more forward to your first real webpage,

Headings

Headings are defined with the <h1> to <h6> elements, <h1> being the most important heading on the page.
Below are some examples of different headings

<h1>This is a H1-heading</h1>
<h3>This is a H3-heading</h3>
<h6>This is a H6-heading</h4>

Headings are important as webbrowsers interpret the headings as the structure of your page. Therefore headings should only be used for actual headings and not for making text bold or large. Besides than structuring your page, headings also increases the readability of your pages – your users will most likely skim your pages and they use the headings as navigation.
Below is an example of how you use the different headings. The headings are used to outline the page – the following HTML would create this page structure:

  1. Introduction
    1. The less important heading
      1. My 3rd level heading
  2. Back to 2nd level headings
  3. The last 2nd level heading
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<h1>Introduction</h1>
<p>Okay, now we’re going somewhere! This is the first paragraph of the page.</p>
<h2>The less important heading</h2>
<p>This is the second paragraph and it is right below a h2-heading</p>
<h3>My 3rd level heading</h3>
<p>Just another paragraph </p>
<h2>Back to 2nd level headings</h2>
<h2>The last 2nd level heading</h2>
</body>
</html>

Id’s & Classes

Now that we have started to semantically divide our content, it is time to introduce yet another set of attributes/values. Up until now, we haven’t been working with the look of your page, but later on you will want to be able to change the look of your webpage and this is where the id’s and classes attributes comes in handy.

Id

This attribute assigns a name to your element. The name must be unique and cannot be used anywhere else in your document. The id is an abbreviation of identifier – so you use the id-attribute when you want to be able to identify this specific element.
You could use the id-element to e.g. define columns in your webpage and the HTML markup would look like this:

<div id="right-column">Content of the right column</div>
<div id="left-column"> Content of the left column </div>

I said that id-elements would have to be unique and this means you cannot have two with the same value in you markup – the following example would not render correctly in the browser:

<div id="menu">This would be your menu</div>
<div id="blog-entry">Your first blog-entry</div>
<div id="blog-entry">Your second blog-entry</div>

Classes

Classes are used to assign some general properties to your element. This means, that you can have several elements in your document with the same class-name. You do this, because you want them to behave and look the same way. Normally this is used for e.g. links or images – when you want a lot of elements to look the same. Below is an example where we assign different classes to the entire blog-entry and to a specific part of the blog-entry.

<div class="blog-entry">
<p> Just Another Day<br />
Written by John<br />
On January 11th </p>
<p class="content">This is my second blog entry, and I just wanted to check in on you </p>
</div>
<div class="blog-entry">
<p> My First Blog Entry<br />
Written by John<br />
On January 11th </p>
<p class="content">I’m so happy to write my first blog entry – yay!</p>
<div>

You can use this in combination with Cascading Style Sheets (CSS). CSS tells the browser how to display a HTML-element, this means that all formatting is (or should be) removed from the HTML-document and stored in a separate file – also referred to as the style sheet. I will not go further into CSS in this tutorial, but it is important that you know there is a thing called style sheets and the design of your webpage is defined in these documents. What you have learned

  1. Id’s and classes are attributes
  2. Id’s are unique to the specific element
  3. Classes can be used across several elements
  4. They are normally used in combination with CSS

Links

A link, or an anchor, is a word, a group of words or an image you can click to jump to another document or a specific part of the current document. The element for links, both internal and external is as simple as <a>. I’ve talked about abbreviations before and a is an abbreviation of anchor. But you cannot just use <a> - you have to add at least one attribute – the href. Href stand for hypertext reference and the value defines the address you are linking to. The simplest link looks like this:

<a href="http://www.yoururl.com">Link text</a>

Open in a new window

Sometimes you want the user to keep having your webpage open and you have the possibility of determining whether or not a link should open in a new window. To do this, you use the target-attribute.
If you decide to use the target attribute, you should be aware that a lot of people dislike this feature and believes that the user should be allowed to decide for herself whether or not she wants a new window, by right-clicking. Having said this, the attribute/value for opening in a new window looks like this:

<a href="http://www.yoururl.com" target="_blank">This is my link</a>

Link to a specific part of your document

If you want to link to a specific part of your document, this can be done in two ways. Previously, it was done by identifying the place you wanted to link to, an name this place – that would look like this:

<a name="question-2">This</a> is the answer to the second question

This is called a fragment identifier – it identifies a specific fragment of you document. The anchor-element is used to define the place you want to link to and you would also use the fragment identifier when you actually linked to it:

<a href="#question-2">See the answer to question 2</a> 

The # indicates that it is a fragment identifier link and the question-2 tells the browser which fragment to look for.
HTML5 suggests using specific id-attributes instead of the name-attribute if they are already available and if they are not, to writ the anchor element a bit different.
Here is an example of using id’s

<p id="my-note">This is my first section, with a unique id</p>
<p>This is just a section – no id’s or anything here</p>

<a href="#my-note">Go to the first section</a> 

If there was no id in the paragraph-element, but we still wanted to link to the first section, HTML5 suggests doing it this way:

<p><a name="my-note" />This is my first section, with a unique id</p>
<p>This is just a section – no id’s or anything here</p>

<a href="#my-note">Go to the first section</a> 

As you can see, we use the anchor-element if there is no unique id and then close the element in the first tag, as the closing tag is not needed.

Images

In HTML images are defined with the <img> tag. The image tag is an empty element as it only contains attributes and therefore has no closing tag. The simplest way of using the <img> tag is with the src attribute (src is an abbreviation of source). The value of the src attribute is the url for the picture you want to display.
The url points to where the picture is stored which would normally be on your server.

<img src="my-picture.jpg">

Besides the src attribute, the alt attribute is required too. Alt is an abbreviation for alternate text. The value of the alt attribure is the elements fallback content – this means, the alt attribute will be shown if the browser was not able to show the picture itself. The value of the alt attribute is also what screenreaders will read aloud when they come to your image. This means, that the alt attribute should be used to describe the actual picture. Let’s say, the picture is a portrait of Angelina Jolie, the HTML markup would look like this:

<img src="my-picture.jpg" alt="Portrait of Angelina Jolie">

On the other hand, a picture of Picasso might be described as “Portrait of Angel Fernandez de Soto. A work from the later part of Picasso’s Blue Period. A man probably drinking absinthe, depicted in a gloomy style”. And why this long description? Imagine you cannot se the picture and the alt txt is your description of the picture. The last attribute to mention regarding the image tag is the title attribute. If you have ever hovered your mouse over an image and seen a text, this is the value of the title attribute. In addition, this text is often referred to as a tooltip. This adds semantic meaning to your pictures but should only be used on pictures where the hover effect Hakims not conflict with the usability of your page. This means that you should not use the title attribute on e.g. images that functions as page navigation.
What you have learned

  1. In order to actually show an image, you always have to add the src-attribute to the image-tag
  2. The value of the alt attribute is essential to screenreaders and if the browser for some reason cannot show your picture
  3. The alt attribute is relevant for screenreaders and searchengines’ webcrawlers – so remember to use it!

Lists

Every once in a while a list can be very handy. You can use them to show ingredients in a recipe or as a table of contents for your document. HTML markup has two different kinds of lists – the ordered and the unordered lists.
The unordered list starts with the opening tag <ul> (abbreviation of unordered list) and every item on list is surrounded by the <li> tag (li stands for list item)

<ul>
<li>List item no. 1</li>
<li>List item no. 2</li>
<li>List item no. 3</li>
</ul>

This HTML markup would result in an unordered list that looks like this:
  1. List item no. 1
  2. List item no. 2
  3. List item no. 3

Generally the unordered list has black circles as bullet points – you can actually change how the bullet points should look, using CSS.
The ordered list looks like this:
  1. First list-item
  2. Second list-item
  3. Third list-item

And instead of the <ul> tag, you use the <ol> (abbreviation for ordered list)
<ol>
<li>List item no. 1</li>
<li>List item no. 2</li>
<li>List item no. 3</li>
</ol>

Except for the obvious reason to use the list (when you actually want a list) a lot of webdesigners use the list to create their menus and navigations – as the navigation very often is a set of related links. Using the list to markup your navigation also means, that if the CSS styling fails the links will still be semantically related.
What you have learned:

  1. There are two different kinds of lists – ordered lists and unordered lists
  2. The tag for en ordered list is <ol>
  3. The tag for the unordered list is <ul>
  4. Every item on the list is marked up with the <li> element
  5. The list element is an obvious choice when create your navigation

Italic & Bold or Strong & Emphasize

I have previously pointed out, that HTML should not be used to affect the look and feel of you web page. Just as you can make words or sentences bold or italic in Word, you can do so using HTML. Up until now, the <b> element, the <i> element, the <em> element, and the <strong> have been purely presentational, but with HTML5, a semantic meaning have been added to these four elements.

  1. The <i> element was for italic text, now it is also for alternate text, such as foreign words, technical terms, or inline stage directions
  2. The <b> element was for bold text, now it is also used as a stylistic offset such as keywords in a document of product names
  3. The <em> was for emphasis, now it is used for words or sentences you would pronounce differently
  4. Lastly, the <strong> element is for something with strong emphasis, it represents importance

Below are some examples of how the different formatting tags are to be used - click on the "Try this example" to see how the different tags are formatted.

<!DOCTYPE html>
A foreign word, <i>smuk</i>, means beautiful in Danish <br /><br />
The phrase <b>semantinc meaning</b> might be keywords in this document<br /><br />
Alternate accentuation? Use the <em>em</em>, not the italic element.<br /><br />
If you want to write semantic code <strong>it is important that you understand the differences</strong>!
</html>

Example

In the following example, a passage from textbook, the <i> element is used to imply stage directions whereas the <b> element is used to indicate to which character the line belongs:

Enter MOUTAIN and SQUIRELL
MOUTAIN So big , strong and high
SQUIRELL How small is't call'd to fight against mountain? What are these
So wither'd and so wild in their attire,
That look not like the inhabitants o' the earth,
And yet are on't? Live you? or are you aught
That man may question? You seem to understand me,
By each at once her chappy finger laying
That you are so.
MOUNTAIN Speak, if you can: what are you?
First Witch All hail, mountain! Hail to thee, thane of Glamis!
Second Witch - All hail, Mountain, Hail to thee, thane of Cawdor!
Third Witch All hail, Macbeth, thou shalt be king hereafter!

Using the <i> and the <b> element in this Hakims create one problem – what if you suddenly decide that you want it to look differently? This is where CSS styling comes in handy. By adding a class-attribute to each <i> or <b> element, you can make use of the semantic properties of the elements but still have full control over their look. The stage direction class could be abbreviated to stg-direc and the character class could be abbreviated to char, and then the markup would look like this:

<p>
<i class="stg-direc">Enter MACBETH and BANQUO</i>
<b class="char">MACBETH</b> So foul and fair a day I have not seen.
<b class="char">BANQUO</b>How far is't call'd to Forres? What are these
…
</p>

What you have learned

  1. If you don’t use CSS to style your elements, the content in <em> and <i> elements will look the same
  2. If you don’t use CSS to style your elements, the content in <strong> and <b> elements will look the same
  3. The <em> and the <strong> elements should be preferred to the <i> and the <b> elements
  4. These elements should not be used for citations and pullquotes, instead you should use the <blockquote> and the <aside> element
  5. You are incited to use classes in combination with these elements which gives you the opportunity to change the look of the elements and hereby use the elements semantically instead of visually

Blockquotes


The usage of the <blockquote> element have been much diversified, but semantically it is only appropriate for one thing – marking up a section of you webpage that is quoted from another source. This means that if you want to make those fancy pull-quotes, the <blockquote> is not the element you should be using. Let’s have a look at how you should be using the blockquote element:

<article>
<header>
<h1>All About Bangalore</h1>
<p class=”byline”>by Shabir Hakim</p>
</header>
<section>
<h2>Know by two great names</h2>
<p>There … to rise.</p>
<p>Where … with less protein.</p>
</section>
<blockquote>
Whole meal flour, the whole grain milled as finely as possible with all of the outer bran and inner germ intact, is one of the best white flour improvers I know of. <br />
Dan Lepard, <a href=”http://www.danlepard.com”>danlepard.com</a>
</blockquote>
<section></section>
</article>

As you can see, the quote is from another source and if you try out the example you will see that the quote is actually indented.
What you have learned

  1. The blockquote element is for quotes from other sources
  2. Pullqoutes should therefore not be marked up with the blockquote element, use the a aside element instead
  3. The blockquote element is a block-level element

Introduction to Forms


A form is simply an area that contains form fields. A form field is an object which the user can add information to – whether it be a text area, a radio button or a dropdown menu. Any web form essentially works the same way – the user fills in some information and submits a button. The form is essential if you want to know anything about your user – e.g. have them send you a mail, store information about them in your database, and so forth. There are countless ways to set up your form and if you’ve ever spent more than 30 minutes on the web (and I assume have) you have probably used them to sign up for newsletters, do a currency conversion, or anything in between. In this topic you will learn the very basics of creating web forms and once you have gotten this down, you can look into all the new features that HTML5 introduces to web forms in a future topic.

How Hakims an HTML form work?


A web form consists two parts - the HTML ‘front end’ and a back end form processor. The HTML front end part handles the presentation while the back end handles the form submissions. The back end of the form is usually written in languages like PHP or ASP. But don’t worry you don’t have to know any of these languages to get a working form – you can use a formmail, which is usually accessible through your internet service provider (ISP). If not, there is several free and paid services out there and all you have to do is choose one of your liking. Here is how a form normally works, step-by-step

  1. A user visits your web page which contains a form.
  2. The users’ web browser displays the HTML form.
  3. The user fills out the form and clicks submits
  4. The browser sends the submitted form data to the web server
  5. A form processor script (also known as a formmail) running on the web server processes the form data
  6. A response page is sent back to the browser.

Creating Your First Form

The <form> tag is used to create the actual form – it looks like this:

<form>
Input elements
</form>

The <form> tag contains the content of your form. This content is called form widgets, controls or fields – they all describe the same thing. This content is mostly different kinds (or states, which is actually the correct word to use) of input fields and a button here and there. Let’s have a look at a very simple form with just two input fields and a submit-button:

<form>
First name: <input type="text" name="firstname" /> <br />
Surname: <input type="text" name="surname" /> <br />
<input type="submit" value="Submit now" />
</form>

As you can see, the input fields are defined by the <input> element. The input element represents a typed data field, which the user can edit. The type-attribute defines which input state you are using, in this case a regular text element, and the name attribute denominates the individual input fields. The type attribute is the master switch that determines what the input element really is.
The button is also defined using the <input> element but the value of the type attribute is "submit" as opposed to "text" in the two previous fields and this indicates that this is a submit button. The submit button has an additional attribute, value. The value of the value attribute defines what the button is going to say and for our example I choose "Submit now".
As you have probably noted by now, the <input> element is an empty element and therefore it is self-closing, using the / at the end.

Tip!


It is always nice when you have the possibility to shorten your markup without compromising on the quality and you have the opportunity when you create regular text input fields in your form. You can omit the type attribute and the browser will automatically interpret the input field as a regular text field. That means that the two following input elements gets treated exactly the same:

<input type="text" />
<input />

Grouping with the fieldset tag

If you have a longer form, it can be very handy to group the different kinds of fields. To do this, you use the <fieldset> element. The name of the group is given by the first <legend> element, which is a child of the <fieldset> element. Once we are at it I want to introduce yet another element, the <label>. The label is used to add a caption to each piece of element you are collecting. Now let’s have an example where we use these new elements;

<form>
<fieldset>
<legend>Contact Details</legend>
<label for="name">Name:</label>
<input id="name"><br />

<label for="telephone">Telephone:</label>
<input id="telephone"><br />

<label for="user-email">Email:</label>
<input id="user-email">
</fieldset>
<fieldset>
<legend>User info</legend>
<label for="username">Username:</label>
<input id="username"><br />

<label for="password">Password:</label>
<input id="password"><br />
</fieldset>
<input type="submit" value="Submit now" />
</form>

Why use the fieldset? Imagine you wanted to add something to this form, perhaps favorite foods. Then you would group the different kind of foods in a new fieldset and gives clarity to your form. I have also added the attribute id to input field. This defines this elements unique identifier and we use it when we are assigning labels. Using the for-attribute we connect the input field and the label.
We have already looked at some of the different types of input fields that you can use in your webform – the text field and the submit button.
A text field is generally 20 characters long, but if you need a larger text field this can be changed, of cause. All you have to do is use the size attribute;

<input type="text" size="35" maxlength="140">

As you can see, I added another attribute, the maxlength. This defines exactly how many characters the visitor maximum can type in any given field. I chose 140 characters so exemplify how you could use the maxlength to create Twitter-like messages in e.g. blog commentaries.

Sending the Data


Until now we have not discussed how to actually send the data entered by the user. You can either send it to your email address, to another page, or to your database.
Whichever option you choose, you always have to define how the browser handles the user input. This is defined through the method attribute, which can have one of two values – post or get.

<form action="url-to-formmail-provided-by-your-ISP" method="post">

The get value ensures that the data is to be encoded by the browser into a url and post means that the data is sent to a database or your email. This means, that generally you will use the post value as it is used for form submissions.
The easiest way to handle your data is to send it to your email. All you have to do is add the action attribute to the form element and the method attribute. The action attribute tells the browser what to do with the content of your form and the method attribute tells the browser how to handle it. Here is an example:

<form action="mailto:your@email.com" method="post">
First name: <input type="text" name="firstname" />
Surname: <input type="text" name="surname" />
<input type="submit" value="Submit now" />
</form>

If you choose to use this method you need to be aware that the functionality depends on the email-client installed on your users’ computer. This means, that not all users will be able to use your form.
Otherwise you could use the formmail, which I mentioned earlier. When using a formmail, the value of the method attribute should always be post as you are sending the data.

Multiline Textboxes - The textarea tag

Sometimes you need to give the visitor the opportunity to enter more than just a few characters and this is what the <textarea> element is for.
Just as you can define the length of a text input field you have the option to change the size of you textarea using the attributes rows and cols (abbreviation of the word column).


For this example I've chosen a textarea which is 25 columns wide and 7 rows high.

<form method="post">
<textarea cols="25" rows="7"></textarea>
<br />
<input type="submit" value="Submit now" />
</form>

Radiobuttons

Radiobuttons is the perfect choice of input field when you have some preset values that the user must choose between but you want to limit their option to just one answer. The structure is the same as with the checkboxes – all radiobuttons with the same name are one group and the user can only choose one radiobutton within a group. The value attribute defines the string that is being sent to your email, to the database or however you choose to use the input.

<input type="radio" name="your-group" value="unit-in-group" />Unit-in-group

Radiobuttons is a suitable choice when you want to present a lot of options to the user, but at the same time makes sure they choose just one.This example shows how you force the visitor to choose just one of their favourite pets:

<form method="post">
<fieldset>
<legend>What is Your Favorite Pet?</legend>
<input type="radio" name="animal" value="Cat" />Cats<br />
<input type="radio" name="animal" value="Dog" />Dogs<br />
<input type="radio" name="animal" value="Bird" />Birds<br />
<input type="submit" value="Submit now" />
</fieldset>
</form>

Checkboxes

Using checkboxes is a good option when you want to give your visitors the option to choose several units within a group of choices. The type attribute must have the value "checkbox" and then you have to make sure that every checkbox within the same group have the same name. The value of the value attribute is the string that is being sent to your email, to the database or however you choose to use the input.

<input type="checkbox" name="your-group" value="unit-in-group" />Unit-in-group

Checkboxes is a suitable choice when you want to present a lot of options to the user and give them the opportuniti to choose one or more items. Here is an example for those who cannot choose between their favourite pets:

<form method="post">
<fieldset>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="animal" value="Cat" />Cats <br />
<input type="checkbox" name="animal" value="Dog" />Dogs<br />
<input type="checkbox" name="animal" value="Bird" />Birds<br />
<input type="submit" value="Submit now" />
</fieldset>
</form>

Submit & Reset Buttons

Buttons are defined by changing the input element’s type attribute. There is two different kinds of buttons – the submit button and the reset button.

The submit button is used whenever you want to submit a form and the markup looks like this:

<input type="submit" value="Submit now" />

The reset button is used to clear al inputs by the user and the markup looks like this:

<input type="reset" value="Reset" />

Here is a simple form with both a submit button and a reset button

<form action="url-to-formmail-provided-by-your-ISP" method="post">
First name: <input type="text" name="firstname" /> <br />
Surname: <input type="text" name="surname" /><br />
<input type="reset" value="Clear form" />
<input type="submit" value="Submit now" />
</form>

The submit-button must always be the last value selected, as it initiates the form submission whereas the reset-button can be pressed at all times during the form fill out.

Dropdown Lists

The drop down lists is another way to give the user the opportunity to choose just one of a series of choices. When would you use the drop down list? As the first item on the list is normally the default choice, using the drop down list can been a good choice when you know that a specific option is often chosen over the other options. The drop down list should only be used when the user has to choose between the options as the drop down list Hakims not gives the user opportunity not to choose anything (such as radio-buttons do).
The drop down lists are defined by the <select> element and the values being sent to you (either via email or to your database) are defined by the value attribute.

<form method="post">
<select name="Icecream Flavours">
<option value="double chocolate">Double Chocolate</option>
<option value="vanilla">Vanilla</option>
<option value="strawberry">Strawberry</option>
<option value="caramel">Caramel</option>
</select>
</form>

If you want another item to be selected instead of the first one on the list, you use the selected attribute. HTML5 allows you to shorten you markup when using the selected attribute, so instead of writing

<option value="strawberry" selected="selected">Strawberry</option>

You can write it like this:

<form>
<select name="Icecream Flavours">
<option value="double chocolate">Double Chocolate</option>
<option value="vanilla">Vanilla</option>
<option value="strawberry" selected>Strawberry</option>
<option value="caramel">Caramel</option>
</select>
</form>

Basics of Tables

HTML tables should only be used for rendering data that naturally belongs in a grid. I’m saying this as tables has previously been used for the layout of HTML pages and this has never been the idea. A lot of webdesigners used the tables for the layout, but there are two main reasons not to do it

  1. It is semantically incorrect
  2. Tables are less flexible than e.g. div’s (and other semantic elements)

The elements of tables are pretty comprehensive, but the first you will need to know is the <table> element. This is the first element and defines that the following markup is inside a table.
When you are structuring tables, the HMTL markup is basically structured with row and cells (note, that there are no tags for columns, just rows).
The tag for rows is <tr> (abbreviation for table row) and the tag for each cell is <td> (which stands for table data, and this is where the actual content is.
Before you start writing your markup for the table, you need to know exactly what it should look like – this will make it a lot easier for you. Let’s try and make a really simple table – with three columns and four rows.

<table border="1" width="100%">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table> 

As you can see, the <td> tags are nested inside the <tr> tags, and thins means, that every cell in a row must be inside the <tr> element.

NB!


And please note, that I have added the attribute border to the <table> tag so that you can actually see the tableborders when you try out the examples, but you should never do this when you are writing your markup – tableborder are a job for CSS!

Colspan & Rowspan

The way the HTML markup is structured means that you in some rows can have four cells, some three cells, some two cells and so forth. In order for this to actually function, you need to use the attributes colspan and rowspan (the value of these attributes is always whole numbers). It can be quite tricky to use these attributes so you might need some patience.
Let’s use the example from the previous topic and have the first row have just two cells instead of three and additionally merge the second cell of row three and four.

<table border="1" width="100%">
<tr>
<td colspan="2">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td rowspan="2">Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 3</td>
</tr>
</table> 

As you can see, I removed the third cell in row 1 and added the colspan attribute to the first cell in row 1. What you need to know when you want to create cells that spans across columns is, that the span is always to the right. To create a cell that spans across rows, you have to remember to that when you span across rows, the span is always downwards. This means, you have to remove a cell in the following rows or else the table is not going to look like you intended.

Thead & tbody

If you want, you can leave your tables like this, but if you appreciate content that are highly semantically structured I am glad to introduce you to the <thead> element. The <thead> element structures the headings in your table and this tells browsers what e.g. each column contains. The <tbody> element structures all of the content, so that the browser knows what the actual content of the table is. Using the same example as before, the <thead> and the <tbody> elements are to b used like this:

<table border="1" width="100%">
<thead>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</tbody>
</table>

Additionally, there is one more element I would like to introduce to you – the <th> element. This tag, which stands for table cell heading, is to be used instead of the <td> element when the content of the cell is a heading instead of actual cell data.
This means that it is the obvious choice inside the <thead> element (which should contain e.g. the first row of your table) but you can also use it for the very first column to indicate the headings - table row headers.
Let’s look at an example – it is very similar to the previous but I have used meaningful content to make clear to you how to use the <th> element.

<table border="1" width="100%">
<thead>
<tr>
<th>Fruits</th>
<th>Vitamin A</th>
<th>Vitamin C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
</tbody>
</table>

As you probably notice when you try out the examples yourself, you cannot see any difference. This is because the thead, tbody, and the tableheadings only add semmantic value. But you can always use CSS to style your table and then these elements actually make the styling easier!

Changing Column Width

Now that you we have used all the right semantics you might want to change the width of each column – as of right now, each column is 33% wide. Let’s say we want the first column to be 40% of the table and the two remaning columns to be 30% (as 40% + 30% +30% = 100%).
In order to do this, we use the <col> element. This element is to be placed between the <table> tag and the <thead> tag and we use the style attribute to define the width of the columns. The <col> element is a self-closing element and you need one for every columns of you table. Let’s have an example:

<table border="1" width="100%">
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
<thead>
<tr>
<th>Fruits</th>
<th>Vitamin A</th>
<th>Vitamin C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
</tbody>
</table>

This way, you can control how wide the columns of the table should be. I have used the style attribute and the value "width:40%" as an example, but ideally, you should have this in your stylesheet file, as this has everything to do with looks and nothing with the semantics.
I you did use your stylesheet you could create three classes where you defined the width of each column, and then your markup would look something like this:

<table border="1">
<col class="column-one">
<col class="column-two">
<col class="column-three">
<thead>
<tr>
<th>Fruits</th>
<th>Vitamin A</th>

What you have learned

  1. Every table starts and end with the <table> element
  2. You use the attributes colspan and rowspan to merge cells
  3. A table is divided into a head (<thead> element) and a body (the <tbody> element)
  4. Inside the head and body the table is divided into rows using the <tr> element
  5. You don’t define columns in HTML tables, but instead you use the <td> element to define the individual data cells
  6. Whenever you need to define a heading cell, use the <th> element instead of the <td> element

Using HTML5 today

HTML5 is an odd mix of things that work right now, things that work in some browsers and the new cutting-edge techniques that won’t work until tomorrow (or the day after). Additionally, some of the elements have undergone a change in their semantic meaning.
When it comes to browser compatibility, which all webdesigners should have in mind, you can think of HTML5’s features as divided into three main categories:

  1. Features that already work. This is features that are very well supported but wasn’t a part of the old official HTML. This also includes the semantic elements we will look at in later topics, such as the article elements, the aside element, the nav element and so forth.
  2. Features that degrade gracefully. The new <video> element degrades gracefully, as it has a fallback mechanism that lets you supply your video to older browsers and then the older browsers can use a flash-based videoplayer to play your video. This also includes some of the new form-features such as autofocus or some of the fancy new CSS3 properties such as rounded corners. Older browser will simply ignore these features but it Hakims not affect the functionality of your webpage. Think of these features as the fancy sprinkles on a cupcake – they’re pretty and fun but do not affect the actual cupcake.
  3. Features that require a JavaScript workaround. A lot of HTL5’s new features are inspired by things that webdevelopers already do using JavaScript– such as for validation. This means that there is a lot of JavaScript examples of how you could do these things and you need to use the JavaScript as a fallback as some browser donot support these things if you decide that it is essential to your webpage.

Checking browser support

So how do you know if the HTML5 feature you are about to implement is going to work? Well, the browser vendors are the ones to decide whether or not a specific feature works. As there are about four or five major browser vendors (and I am not even counting the ones for mobile devices such as tables as smartphones!) it is going to be uphill testing the feature yourself on all browsers and their different editions.
Luckily there are other people who do this work for you. CanIUse.com is such a site. They test almost every single one of the new features and the test the compatibility a long way back, version-wise, and on every mainstream browser.
Here is how it works

  1. Using the index. At the frontpage of CanIUse.com there is a comprehensive index of all the new features of CSS3, HTML5, SVG and JS API. You can simply click on the subject you want to check out, e.g. “New Semantic Elements” if we want to check out which browsers support the new <nav> element.
  2. Using the searchbox. If you are not sure of which category the feature you are looking for is placed in, you can always use the search box. Still looking for the nav element, all you have to do is type in nav and CanIUse.com instantly finds the right table for you.
  3. Understanding the tables. Now we have found the right table but it can be a bit confusing at the beginning. The first column indicates the browser version and the next columns are the individual browsers. All cells in the table are colored – a light green means that the feature are supported where as a light red indicates that it is not supported.

Now that you know which version of the different browsers supports your features it is time to use this knowledge! This statics used in combination with country specific statistics allows you to make a sound decision of whether or not it is worth the trouble to e.g. implement a JavaScript fallback.
Here is an example: Let’s say we want to use the <nav> element. According to CanIUse.com this is not supported by Internet Explorer 8.0 and previous version. If your webpage addresses users from Spain this means that, according to StatCounter Global Stat, approximately 36% percent of your visitors are going to be prevented from see your page correctly (as of January 2012 approximately 31% of the Spanish population uses Internet Explorer 8.0, and 5% uses IE7 – added up, this gives us 36%).
As you can see, it suddenly makes sense to check which browsers support which features – you might be so lucky that the features you are planning to use are supported by the mostly used browser in your region and therefore you do not have to use time implementing fallbacks.

Using polyfills to support HTML5

As described in the previous topic, not all of the new HTML5 features work across the different browsers– this is the category of HTML5 features that I have previously described as “Features that require a JavaScript workaround”. Therefore you sometimes have to do some tricks to get your markup to behave correctly . This is were polyfills, fallbacks and shims come in handy.

What polyfill mean?

A polyfill, or polyfiller as they are sometimes called, is a piece of code that provides a technology or function that you, as the developer, would expect the browser to support natively. It could also be summed up to the phrase “Regressive Enhancement”. Enhancing the browser – but focusing on older versions.
And why is it called a polyfill you might think? A British polyfiller is actually the same thing as the American spackling paste. And the virtual polyfiller is applied for exactly the same problems as the real polyfiller – whenever you have a crack in the wall (browser) you use the polyfiller to fix the cracked wall and thereby you attain a nice, even wall (browser). This way you flatten the browser landscape and hopefully all of your visitors get the same, even experience.

How do I choose?

There are a lot of polyfills out there and some of them are better than others, some do just one thing and some try to do it all. Because of this I think it is important to get a little guidance on which polyfills to use and which to steer clear of. And therefore I’ve decided to end the following sections with a topic about polyfills for the specific features.
Whether you choose to use them or not is up to you, but they will most likely increase both the usability and user experience of your webpage. Even though you might be completely new to HTML you might as well try to start using polyfills because at the end of the day you will be a better webdeveloper having polyfills in your repertoire.

Introduction to Semantic HTML5 elements

HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our attributes,an attribute had to have a value and to close all empty elements.

But HTML5 is coming with lots of flexibility and would support the followings:

  1. Uppercase tag names.

  2. Quotes are optional for attributes.

  3. Attribute values are optional.

  4. Closing empty elements are optional.

The DOCTYPE:

DOCTYPEs in older versions of HTML were longer like shown below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

because the HTML language was SGML based and therefore required a reference to a DTD.

HTML 5  uses simple syntax to specify DOCTYPE as follows:

<!DOCTYPE html>

Character Encoding:

HTML 5 authors can use simple syntax to specify Character Encoding as follows:

<meta charset="UTF-8">

All the above syntax is case-insensitive.

The <script> tag:

It's common practice to add a type attribute with a value of "text/javascript" to script elements as follows:

<script type="text/javascript" src="scriptfile.js"></script>

HTML 5 removes extra information required and you can use simply following syntax:

<script src="scriptfile.js"></script>

The <link> tag:

So far you were writing <link> as follows:

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

HTML 5 removes extra information required and you can use simply following syntax:

<link rel="stylesheet" href="cssstyle.css">

HTML5 Elements:

HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between.

The difference between start tags and end tags is that the latter includes a slash before the tag name.

Following is the example of an HTML5 element:

<p>...</p>

Most of the elements contain some content like <p>...</p> contains a paragraph. Some elements, however, are forbidden from containing any content at all and these are known as void elements like previous versions. For example, br, hr, link and meta etc.

HTML5 Attributes:

Elements may contain attributes that are used to set various properties of an element.

Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example.

Following is the example of an HTML5 attributes which illustrates how to mark up a div element with an attribute named class using a value of "myexample":

<div class="myexample">...</div>

Attributes may only be specified within start tags and must never be used in end tags.

HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

HTML5 Document:

html5 visual sementic layout

The following tags have been introduced for better structure:

  1. section: This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.

  2. article: This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.

  3. aside: This tag represents a piece of content that is only slightly related to the rest of the page.

  4. header: This tag represents the header of a section.

  5. footer: This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.

  6. nav: This tag represents a section of the document intended for navigation.

  7. dialog: This tag can be used to mark up a conversation.

  8. figure: This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

The markup for an HTM 5 document would look like the following:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

 

The article tag

The article element is one of the new elements that have been introduced with HTML5. As this is a new element there has been some confusion of how to use this element. But there seems to be an agreement that you use the <article> element when you markup content, that makes sense on its own. What this mean? It means that you could use the <article> element when marking up an “about me" page, a blog entry, and also every comment to your blog entry.
But you are not supposed to use the <article> element around every single paragraph – the point is, whatever you put in the <article> element it is supposed to make sense on its own.
Using the Flour-article, the article element should be used like this (please note, that I have replaced a lot of the actual content with three dots, so that the example ex1 not take up too much space):

<!DOCTYPE html>
<body>
<article>
<div id="header">
<h1>All About Bangalore</h1>
...
</div>
<div id="content">
<h2>Know by two great names</h2>
<p>There are…</p>
<h2>All-Purpose Flour</h2>
<p>All-purpose …</p>
...
</div>
</article>
</body>
</html>

As you can see, the <article> element contains the <div id="header"> and the <div id="content"> as the content in these two <div>’s can be read as a whole article. I have not included the <div id="footer"> as the content in this element has nothing to with the actual article we still use a lot of div-elements in this example, but I will show you in the following topics which new HTML5 elements you should use instead.
Sometimes you need more than just one example and I’ve included another: Using the blog-entry example from previous topics, you would use the article element to wrap each blog entry like this:

<article>
<h1>Just Another Day</h1>
<p>Written by John<br />
On January 11th </p>
<p class="content">This is my second blog entry, and I just wanted to check in on you </p>
</article>
<article>
<h1>My First Blog Entry</h1>
<p>Written by John<br />
On January 11th </p>
<p class="content">I’m so happy to write my first blog entry – yay!</p>
</article>

What you have learned:

  1. <article> is a new semantic HTML5 element
  2. <article> should be used when the content would make sense on its own (e.g. in a rss-reader)
  3. <article> is a very specific element – more specific than e.g. the <div> element

The header tag

The <header> element is a bit ambiguous as it can be used in different kinds of ways. Firstly you need to know that the <header> element do not introduce a new section – it is the head of an existing section. Secondly you must not confuse it with the <head> element – it is two different elements!
Here is what it looks like:

<header>...</header>

So can you have two <header> elements on the same page? Sure you can! Imagine you have three blog entries on a single page; well they can all have a <header> section. Multiple articles on one page? They all have their own <header> element.
Using the flour-article, this means that the <div> element we previously used to divide the headline and author from the rest of the content can now be replaced by the <header> element.

<article>
<header>
<h1>All About Bangalore</h1>
<p class="teaser">Bangalore is the backbone of India we love.</p>
<p class="byline">by Shabir Hakim</p>
</header>

<div id="content">
<h2>Know by two great names</h2>

When using the <header> element you should always have one heading tag (<h1> - <h6>), but you can have multiple. You can also use the <hgroup> element, which I will explain later on. Lastly, you can also have other "header" relevant content such as the byline, publication date, table of contents etc.
What you have learned:

  1. <header> is a new semantic HTML5 element
  2. The <header> is used inside a section (not necessarily at the top of your document)
  3. Therefore, you can have multiple <header> in the same document

The hgroup tag

The <hgroup> is a second-level element, used to wrap one or more heading elements (<h1> to <h6> ), such as the title and sub-heading. As the <hgroup> is only allowed to contain heading elements, some examples might be the easiest way to show when and where the <hgroup> should be used.

An article with title

When there is just one title, there is no need for the <hgroup> element:

<article>
<header>
<h1>All About Bangalore</h1>
</header>
</article>

An article with title and metadata

Still, there is just one title, so even though there is some metadata about the article, the <hgroup> element is not relevant:

<article>
<header>
<h1>All About Bangalore</h1>
<p>Published on January 12th</p>
</header>
</article>

An article with title and subtitle

Now we have to titles, so we can use the <hgroup> element:

<article>
<header>
<hgroup>
<h1>All About Bangalore</h1>
<h2> Bangalore is the backbone of India we love</h2>
</hgroup>
</header>
</article>

An article with title, subtitle and metadata

When we have several title and metadata, the <hgroup> element only contains the actual titles (which should be marked up with the <h1> trough <h6> elements):

<article>
<header>
<hgroup>
<h1>All About Bangalore</h1>
<h2> Bangalore is the backbone of India we love</h2>
</hgroup>
<p>Published on January 12th</p>
</header>
</article>

What you have learned:

  1. The <hgroup> element is always inside a <header> element
  2. The <hgroup> element only contains headings (such as subtitles or tag-lines), which are marked up with the <h1> trough <h6> elements
  3. All other <header> relevant content should be outside of the <hgroup> element

The footer tag

You are probably used to seeing footers on websites all the time – they usually contain copyright-stuff, a few selected navigational links, and maybe contact information. Just like the <header> element, the <footer> element ex1 not introduce a new section in your document, but is the last part of that specific section – whether it be an <article>, <section> or some other section.
This means, that you can have multiple footers on the same page – if you have several blog entries in one page, every blog entry can have its own footer and the page itself can have its own footer too.
Using the flour-article as an example, you could use the <footer> element like this:

</header>
<div id="content">
<h2>Know by two great names</h2></div>
<footer>
<p class="disclaimer">This article is copyright of AllRecipes.com</p>
<p><a href="http://shabirhakim.net/howto/all-about-ban galore/">See the original article here</a></p>
<p>Part of <a href="http://www.html5-tutorials.org">HTML5-tutorials.org</a></p>
</footer>
</article>

If you footer contains nothing but links, the <footer> tag should be used this way:
<footer>
<ul>
<li>About us</li>
<li>Contact</li></ul>
</footer>

And what should the footer contain? Content that is related to the section’s content but not part of the actual content.
Regarding blog entries, the <footer> might be where you have your related entries, comments, facebook like-buttons and publication date (if you do not have this in the <header> section).
What you have learned:

  1. The footer is always the last part of a given section, not necessarily the document
  2. The <footer> element is nested inside its’ parent element
  3. Therefore you can have several footers in the same document
  4. The footer usually contains information about its section as author, publish date, copyright etc.
  5. The <footer> element is a block-level element

The navigation tag

Another one of the new semantic elements of HTML is the <nav> element. The <nav> element represents the navigation for a document. The navigation can be within the document or to other documents, but it is important to notice, that not all links in a document should be marked up with the <nav> element.
The <nav> element should only be used for the primary navigation structure.
So how do I use the <nav> tag? In "the old days" you would probably have used a div to do your mark up:

<div id="menu">
<ul>
<li><a href="home.html">Home</a></li>
...
</ul>
</div>

Or maybe something like this:
<div id="navigation">
<ul>
<li><a href="home.html">Home</a></li>
...
</ul>
</div>

And markup wise, the difference is quite small – you just have to replace the old <div> with the new more semantically correct <nav> element, like this:

<nav>
<ul>
<li><a href="home.html">Home</a></li>
...
</ul>
</nav>

So, this means that it is easy to use the new <nav> element, right? Unfortunately: no. There is little consensus of when to use the <nav> element. Can it be used on breadcrumbs? Related posts? Pagination? Some people would say "Definately" while others would say "No way!"
Should this stop you from using the <nav> element? No. You could use the <nav> element for all of the above mentioned examples and it is up to you to decide if and where you want to use it. A rule of thumb might be to use it whenever you would have used the <div id="menu"> or <div id="navigation">, and this entails that both of the before mentioned examples can be marked up with the <nav> element.
What you have learned:

  1. The <nav> element should be used for the primary navigation structure
  2. Some might use the <nav> element for bread crumbs, pagination and related posts
  3. Essentially, it is your own perception of the semantics of the <nav> element that decides how you use it.
  4. The <nav> element is a block-level element

The section tag

The section element is one of the new elements that it is the hardest to learn to use correctly. It is more general than the <article> element, but you still have to have an actual section in your document when you use the <section> element.
This means, that you should always consider whether or not it might be more appropriate to use the <nav>, the <aside>, the <header>, the <footer>, or the <article> element before actually using the <section> element. (Some of these elements might be new to you, there is topics discussing all of them).
Let’s take a look at how you could use the <section> element, to divide the different parts of the flour article into sections:

</header>
<section>
<h2>Know by two great names</h2>
<p>There are two …</p>
</section>

<section>
<h2>All-Purpose Flour</h2>
<p>All-purpose … </p>
</section>
...
<footer>...</footer>
</article>

As you can see, this adds several lines of markup to your document and some prefer as little markup as possible. Luckily for them, you do not need to use the section element inside the article, but it often creates a more correct document outline.
As the section element divides your content into sections, it is important to remember that all section elements must be followed by a heading tag - if this ex1 isn't make sense semantically, then you should not be using the section element (consider using the one of the other new semantic HTML5 elements or perhaps no element at all?).
Some might give in to the temptation of using the section tag as a styling hook for e.g. pullquotes, but resist it. There are more appropriate elements to use for this purpose instead of the section element, e.g. the aside element.
What you have learned:

  1. The <section> is not supposed to be used as a styling hook
  2. If you do need a styling hook, use a <div>
  3. The <section> element should always be your last choice – make sure there is no other element that is more relevant
  4. Do use it to divide a lengthy terms and conditions page into numbered sections
  5. Use the <sections> element to groups of content, e.g. a collection of articles on a news site
  6. Don’t use the <section> for quotes and sidebars – use the <aside> element instead
  7. If your <section> isn’t directly followed by a heading element (<h1> to <h6>), then the <section> element is not what you need
  8. You can nest sections inside article and articles inside sections
  9. The <section> element is a block-level element

The aside tag

The aside element is new to HTML5 and it can be used in two different contexts. Basically, the context of the <aside> element is based on whether or not it inside or outside the article element.
In magazines you often see info-boxes pulled away from the actual content of the article, highlighting something with relevance to the article such as pull-quotes and when this is the scope of your aside element then it has to be placed inside the article element, because it has a relationship to the content of the article.

Content related to the current article, blogpost, etc.


Here is an example of the <aside> element being used inside the <article> element.

<article>
<header>
<h1>All About Bangalore<h1>
<p class="byline">by Shabir Hakim</p>
</header>
<section>
<h2>Know by two great names</h2>
<p>There … to rise.</p>
<p>Where … with less protein.</p>
</section>
<aside>

If you use organic flour you very often get better bread

</aside> </article>

Content related to your page as a whole

The aside element can also be used to mark up content which is relevant to your page as a whole – containing blogrolls, additional navigation, even adds – and when this is the scope of your <aside> element it has to be placed outside of the article section. Here is an example:

<aside>
<h3>Foodblogs I like</h3>
<a href="http://www.bakerella.com">Bakerella</a>
<a href="http://sourdough.com/"> Sourdough.com</a>
<a href="http://www.bakingobsession.com">BakingObsession</a>
</aside>
<article>
<header>
<h1>All About Bangalore<h1>
<p class="byline">by Shabir Hakim</p>
</header>
<section>
<h2>Know by two great names</h2>
<p>There … to rise.</p>
<p>Where … with less protein.</p>
</section>
</article>

Whether you use the aside element for the former or the latter use, you need to remember that the aside element is for secondary content regardless of the visual design of this content. This also implies that the aside element should be used for e.g. pullquotes as they are a part of your content - you should not use the blockquote element.
What you have learned

  1. The aside element can be used within or outside the article element
  2. When used inside the content of the aside element must be relevant to the article content
  3. If you can remove the content of the <aside> element and the article content, to which it is relevant, becomes incomplete then you should not be using the <aside> element
  4. When used outside the article element the content of the aside element must be relevant o your entire web page
  5. The aside element is a block level element
  6. You can use both block level elements (such as headings, <h1> - <h6>) and inline elements (such as emphasize, <em>) inside of the <aside> element

The address tag

This is one of the new HTML5 elements that are actually almost as straight forward as it seems. The two most important things to have in mind are that the address element relates to the element in which it is nested and that it has to be directly related to this section. Oh and you cannot take the word address literally – it should be considered as the intellectual origin of the document. And what is the ‘intellectual origin of the document’? That is the author or the organization publishing the document.
Here is clear example of how the <address> element could be used:

<article>
<header>
<hgroup>
<h1>All About Bangalore<h1>
<h2>Lovable Place of Inia.</h2>
</hgroup>
<address>by Shabir Hakim</address>
</header>

The <address> element can also be used to indicate authors of sections of your document – here is a great example where the <address> element is used to mark up the author of a blockquote:

<article>
<header>
<h1>All About Bangalore<h1>
<p class=”byline”>by Shabir Hakim</p>
</header>
<section>
<h2>Known As</h2>
<p>Garden City of India</p>
<p>City of Flyovers</p>
</section>
<blockquote>
Great place for I.T Professionals also known as silcon valley of india
 <address>Rack , www.bangalore.com</address>
</blockquote>
</article>

And just to make sure – below is an example of how it should not be used - to mark up postal addresses (and here is an exception - unless of cause the postal address is in fact the relevant contact information of the specific document or part of the document)

<address>
Effone Software <br />
2nd flooor Christ Complex <br />
Auston <br />
</address> 

What you have learned

  1. The address element is used to mark up the author of the document (or the specific section of the document)
  2. The <address> element will typically be used in the header or the footer

Form validation using HTML5

The fields in a form are there to gather information from your visitors, but no matter how much time you spend setting up your form there is going to be at least some of your visitors who gets confused filling out your form, might skip important parts of your form, type invalid values (who has ever heard of an email address with a space in it?) and the result? They click submit and you end up getting a whole lot of more or less useless data.
And this is where validation enters – if you validate your inputfields before the data is sent to your inbox or database, then the visitor gets a chance to correct the data and this means that the chance of you getting the data you actually asked for, improves.
For years this have been done with JavaScript and done correctly, this works to perfection. So why change that you might ask? Because the guys behind HTML5 have introduced new, simpler ways of validating your data, that Hakims not require several lines of JavaScript, but let the browser do the validation client-side. And the best part about it is that it is very easy to implement - all you need to do is add the right attribute here and there.

How HTML5 validation works

The basic idea behind HTML5 validation is, that you tell the browser which fields you want validated but don’t actually do the tedious implementation yourself. As you define what state your input field is in you also asks the browser to validate the field client-side based on the type of input field.
Unfortunately not all modern browsers understand this new way of validating forms but don’t worry. If you are using a type value the browser Hakimsn’t recognize, it will just treat is as a regular text field and no harm has been done. That means that all the following input elements get treated exactly the same:

<form>
<input type="text" /> <br />
<input type="my-weird-value" /> <br />
<input />  <br />
<input type="submit" value="Submit now" />
</form>

And why is this useful information when we are talking about validation? Because some of the input types discussed will not be supported by all browsers but this should not hold you from implementing the new HTML5 validation tricks.

Example - the required attribute

Let’s say you have a regular text input field that cannot be left blank – then you use the attribute required. HTML5 allows you to shorten you markup when using the required attribute, so instead of writing it the long way:

<form>
<input type="text" required="required" /><br />
<input type="submit" value="Submit now" />
</form>

You can just write:

<form>
<input type="text" required /><br />
<input type="submit" value="Submit now" />
</form>

Using this required attribute the browser informs the user that she has to fill out this particular field before submitting the form. The required attribute do not take into consideration what kinds of data are typed into the input fields but you do have the opportunity to do this with some of the following input types. Now let's go have a look at them in the following topics!

Validating email addresses

One of the new values to the type attribute is email. Using this type of field instead of the regular text field the browser uses a regular expression to check that the user has in fact typed in an email address. Hakims this means that the user cannot type in a fake email address? No. But you do not have to worry that the user types in a comma instead of a period or that she accidentally types a space. No matter what the user is going to submit, it is going to look like an email address. Here is how it looks:

<form>
<input type="email" required /> <br />
<input type="submit" value="Submit Now!">
</form>

Some browsers only look for the @ and other browsers look for at pattern consisting of a @ followed by at least one letter and a dot.

As of right now, this is not supported by e.g. Internet Explorer 9.0 and previous version or by the Android browser. This means that in order to have valid email validation for these browsers you will have to make a work-around to have this feature working in all browsers. This Hakims not mean that you should not implement the attribute email, because if the browser Hakims not regocnize type="email" it will just treat is as type="text" and render it as plain text.

Using patterns to validate email addresses

Another way to validate email addresses is to use the pattern attribute. As mentioned in the topic about patterns, the pattern can be anything you specify and it is based on regular expressions. I will not go further into the subject of regular expressions as this is a very comprehensive subject.
All you need to know to use patterns to validate email addresses is which pattern to use. The following HTML5 email address regular expression is close to a complete example of what your pattern could look like. (Thanks to Gervase Markham). Here is what the pattern looks like:

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

As you can see the pattern is pretty intricate, but basically it checks whether or not the user input looks like a normal email address such as ShabirHakim@unknown.com

<form>
<input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required />
<br />
<input type="submit" value="Submit Now!">
</form>

Type=”email” or pattern?


As both ways of validating email addresses has their pros and cons it is up to you to decide which one to use. You should not try to use them both at the same time as this might induce a clash in browsers that support both features. Using type=”email” has the advantage that it is semantically correct both using the pattern attribute has the advantage that there are several easy-to-use polyfills on the web which ensures support for a greater range of audience.
What you have learned
  1. Using HTML5 the semantically correct way of validating email addresses is to set the type attribute to email, type=”email”
  2. Not all browsers look for the same pattern when validating email addresses
  3. You can also use the pattern attribute to validate email addresses
  4. The type=”email” ensures semantically correct HTML5 where as the pattern attribute might ensure a valid email address more frequently
  5. The pattern attribute can be supported using a polyfill

Validating URLs

If you ask what constitutes a valid URL you will most definitely get different answers depending on who you ask. This affects the url input type and means that even though most browsers demand a URL prefix you can make one up yourself and both http:// and bonk:// will be accepted as valid url prefixes. (Actually, the only thing you need is a letter and the colon - try it out yourself in the LIve Preview Validator below). On the other hand, no spaces are allowed but your url Hakimsn’t need to include a period. As I have hopefully made clear, you cannot rely completely on the url input for validation yet, but it is still a good idea to include it as it future-proofs your website.

<form>
<input type="url" required />
<input type="submit" value="Submit Now!">
</form>

Luckily, we can improve the url validation inout type by adding the pattern attribute to our input field.The pattern attribute accepts JavaScript Regular Expressions. If you are not familiar with regular expressions, all you need to know by now, is that you can add the following attribute: pattern="https?://.+" to your input field, and then you have improved your url validation by demanding that all url's start with either http:// or https://

<form>
<input type="url" pattern="https?://.+" required />
<input type="submit" value="Submit Now!">
</form>

Validating phone numbers

As of writing this, this is one of the new input types that are not yet supported by any browsers. This means, that the browsers do not check for any patterns as with the url or email input. One of the reasons this input type have no pattern might be the fact that phonenumbers differs from country to country and therefore prevents the use of one standard pattern. This should not prevent you from using this input type as it makes your markup more semantically correct and future-proofs your website.

<form>
Your phonenumber: <input type="tel" required />
<input type="submit" value="Submit now" />
</form>

One of the other great things about this input type is, that most smartphones changes the keyboard from the regular qwerty keyboard to a number pad – and this really improves the user experience!

Validating dates

HTML5 gives you different opportunities to validate dates. The browsers that understand the date element provide your users with handy drop down calendars to pick the dates from. This prevents your users from misunderstanding the date format or deliberately to pick incorrect or non-existing dates.
The date element provides you with six different ways f defining dates: date, month, week, time, date + time, and date + time – time zone. As of right now, the support is at best sparse as Opera is the only browser that provides these drop down calendars and Chrome provides the bare minimum – spinboxes in which the user cannot choose an invalid number. Therefore, if you want to implement the date element you would also have to use a polyfill to support it properly.
If you use the “Try this example” feature then please note that I have not implemented any polyfill to support the date element and therefore the example will reflect how your current browser actually renders the element.

Date

The format for the date type is YYYY-MM-DD, which means that May 14th 2012 would be rendered 2012-05-12. This is a classic choice for anything from vacation dates to delivery dates.

<form>
<input type="date">
<input type="submit" value="Submit Now!">
</form>

Month


The format for the month type is YYYY-MM, which means that May 2012 would be rendered 2012-05.

<form>
<input type="month">
<input type="submit" value="Submit Now!">
</form>

Week

Sometimes all you need is a week, and the format for the week type is YYYY-Www, which means that week 12 in 2012 would be rendered 2012-W12.

<form>
<input type="week">
<input type="submit" value="Submit Now!">
</form>

Time

Sometimes you need a specific time and the time type is renderes HH:mm:ss.ss but the seconds are optional. This means that 4.30 p.m. would be rendered 16:30 or if you choose to include seconds, 16:30:23.4

<form>
<input type="time">
<input type="submit" value="Submit Now!">
</form>

Date & Time

The datetime type has a long format: YYYY-MM-DD THH:mm:ss.s and May 14th 2012 would be rendered 2012-05-12 T16:30:23.4

<form>
<input type="datetime">
<input type="submit" value="Submit Now!">
</form>

What you have learned

  1. There is several different ways of validating dates
  2. The date attribute support is of right now very sparse and therefore you should consider using a polyfill to support it

Placeholder text

An empty form might be a bit intimidating especially if you are uncertain of what might go in to the different input fields. Therefore some developers invented the idea of a sample text inside the fields – so the user would have an idea of what to type in. This is what we nowadays call the placeholder text. Usually the placeholder text would have a light gray color in order to distinguish it from the user’s actual input.
As you might have discovered by now, the ability to set a placeholder text in input fields is not really a part of form validation but it is a long awaited feature that developers up until now have been creating using JavaScript. The placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click the field the placeholder text disappears and if you do not type anything into the field the placeholder text will reappear as soon as the field is no longer focused.
Using the placeholder attribute is quite easy – have a look at the example:

<form>
First name: <input type="text" name="firstname" placeholder="Shabir"/> <br>
Surname: <input type="text" name="surname" placeholder="Hakim"/> <br>
<input type="submit" value="Submit now" />
</form>

The placeholder attribute actually has a pretty great support across browsers but if your user uses a browser that Hakims not support the new html5 attribute no harm is done – the browser will just ignore your placeholder text. And of cause you can use a polyfill to make sure the placeholder text is shown in all browsers – check out my recommendations.

Numbers as spinboxes

Another take on validating the input from your users, is using the number attribute. There are many situations where you might need the user to pick a number and even though it seems pretty straight forward it’s not. Look at it this way: If I asked you to pick a number, you would might say -5. But I meant a number from 1 to 10. Can you choose 3.75? I’d say you are just being argumentative as you should have known I meant a whole number. As you can see a number is not just a number and normally you have some implied boundaries.
And this is what makes the number attribute so special- the fact that you can control the range of numbers the user can select from, force the choices to be only integers and the step scale factor is set to be 1 by default. When you use the number element it is displayed as a spinbox.
Let’s have a look at the simplest way of using the number input type – The smallest possible value is per default 1, the step scale factor is 1 and there is no maximum – hit the “Try this example" button to see what it looks like:

<form>
<input type="number" required>
<input type="submit" value="Submit Now!">
</form>

Now let’s say you want to limit your users’ choices to a range of 10 to 20. Then we have to use the min (which specifies the minimum acceptable value for this field) and max (which specifies the maximum acceptable value for this field) attributes, and it looks like this:

<form>
<input type="number" min="10" max="20" required>
<input type="submit" value="Submit Now!">
</form>

I said you could control the step scale and this is done using the step attribute. Additionally, you can preset a number – maybe you have an idea that this is the most common number and this way you make it quicker for the user to fill out the form. In the following example I have set the step scale to 2 and the pre-set value is 16 – here is what it looks like:

<form>
<input type="number" min="10" max="20" step="2" value="16" required>
<input type="submit" value="Submit Now!">
</form>

If you try to go beyond the specified range some browsers will grey out the arrows while others just won't allow you to go any further.
What you have learned

  1. The input type number forces the user to choose nothing but numbers
  2. The step factor scale is always one and this cannot be changed
  3. You can set a minimum and a maximum using the min and max attributes
  4. If your minimum is not an integer, the step factor scale will still be 1 – this means that if you minimum is 2.2 the next option will be 3.4
  5. You can set the step scale using the step attribute
  6. You can set a predefined value using the value attribute

What is a Markup Language

Anything added to a text document that conveys an extra information. Markup languages are the languages that build the web.. That is, if we want to display a word in some format like bold,underline... we use the corresponding markup tags for that particular word. Thus markup describes exactly how the document should appear on the screen or during in report processing. Markup is being used extensively not in computing world but also in electronic documents. Most of the People often think it is extremely difficult to make a website. That is not the case! Everyone can learn how to make a website. And if you read on, you will have made one in just one hour. Others believe - just as mistakenly - that expensive and advanced software is needed to make websites. It is true that there are lots of different programs that claim they can create a website for you. Some come closer than others. But if you want it done right, you must do it yourself. Fortunately, it is simple and free and you already have all the software you need. The aim of this tutorial is to give you an easy, yet thorough and correct introduction to how to make websites. The tutorial starts from scratch and requires absolutely no prior knowledge of programming The tutorial cannot show you everything. So some engagement and a will to experiment are required. But don't worry - learning how to make websites is a lot of fun and gives a tremendous amount of satisfaction when you get it right. There are two types of markup and hence there exists two types of markup languages. They are procedural and generalized.

Procedural Markup Languages

Procedural markup is typified by its use in typesetting and publishing systems, including word processors.

Generalized Markup Languages (GML)- 

There is a major shortcoming in the procedural markup languages. That is, if we intend to extract information from the documents, procedural markup language is found wanting. To meet this challenge, a generalized markup language marks up documents in a different way. The characteristics of these languages are:

  1. The elements have logical names, rather than expressing detailed formatting instructions. For example, an element H1 is being used to mark up text that is intended to be a first-level header.
  2. Software applications that read documents marked up using a GML are free to present them as they see fit, using formatting rules for particular elements that are either defined internally, or specified elsewhere. When displayed in the screen, the H1 element could be associated with a particular combination of font size and weight.
  3. GML elements usually involve both start and end tags so that the original content is fully contained inside an element. Also there is no hint about how this document should be presented. That is, the web browsers are free to reflect the meanings of these elements. The most commonly used generalized markup language is HTML for web documents and WML for mobile contents.

Generalized Markup Rule-sets Each GML has its own elements, its own rules, and its own particular area of application and in order for the language to function properly as a language, those must all somehow be defined. GMLs are themselves written using Generalized Markup Rule-sets (GMRS), also called meta-languages. The two famous meta-languages are Standard Generalized Markup Language (SGML) and the Extensible Markup Language (XML). In a way, XML is a subset of SGML and WML is derived from XML. Recently another markup language called as Extensible HTML (XHTML) for future web publishing came out. XHTML is a reformulation of HTML 4 in XML. XHTML has to be designed to avoid some undesirable features of HTML. Though all these features can be accomplished easily using XML, XHTML has been formulated for keeping the large investment made in HTML. Below is the list of markup languages :-

  1. Application Markup Language (AppML)
  2. Architecture Description Markup Language (ADML)
  3. Artificial Intelligence Markup Language (AIML)
  4. ASN.1 Markup Language (AML)
  5. Astronomical Instrument Markup Language (AIML)
  6. Astronomical Markup Language (AML)
  7. Automatic Site Markup Language (ASML)
  8. Bean Markup Language (BML)
  9. Better Markup Language (BML)
  10. Bibliography Markup Language (BibML)
  11. Bioinformatics Sequence Markup Language (BSML)
  12. BIOML -  BIOpolymer Markup Language
  13. Board Game Markup Language (BGML)
  14. Business Rules Markup Language (BRML)
  15. Comics Markup Language (ComicsML)
  16. Chemical Markup Language( CML)
  17. Claris Dynamic Markup Language (CDML)
  18. DARPA Agent Markup Language (DAML)
  19. Description Logic Markup Language (DLML)
  20. Directory Services Markup Language (DSML)
  21. Document Template Markup Language (DTML)
  22. Dynamic Hypertext Markup Language (DHTML)
  23. Dynamic Markup Language (DML )
  24. E-business eXtensible Markup Language (ebXML)
  25. Earth Science Markup Language (ESML)
  26. Environmental Markup Language (EML)
  27. Financial Products Markup Language (FpML)
  28. eXtensible Application Markup Language (XAML)
  29. eXtensible rights Markup Language (XrML)
  30. eXtensible Telephony Markup Language (XTML)
  31. eXtensible Graph Markup and Modeling Language (XGMML)
  32. eXtensible Hypertext Markup Language (XHTML)
  33. eXtensible Markup Language (XML) 
  34. FAQ
  35. Farleden Dynamic Markup Language
  36. Field Data Markup Language  (FDML)
  37. FileMaker Dynamic Markup Language (FDML)
  38. Financial products Markup Language (FpML)
  39. Financial Services Markup Language (FSML)
  40. Forms Data Markup Language (FDML)
  41. Form Document Markup Language (FDML)
  42. Forms Definition Markup Language (FDML)
  43. Forms Markup Language (FML)
  44. Gene Expression Markup Language (GEML)
  45. Geometry Description Markup Language (GDML)
  46. Geography Markup Language (GML)
  47. Graffiti Markup Language (GML)
  48. Handheld Device Markup Language (HDML)
  49. Hypertext Markup Language (HTML) 
  50. Human Markup Language (HumanML)
  51. Human Resources Markup Language (HRML)
  52. ICAAP eXtended Markup Language (IXML)
  53. Image Markup Language (IML)
  54. Instrument Control Markup Language (ICML)
  55. Instrument Markup Language (IML)
  56. International Development Markup Language (IDML)
  57. Java Speech Markup Language (JSML)
  58. Karst Markup Language (KML)
  59. Koala Bean Markup Language (KBML)
  60. Lambda Markup Language (LML)
  61. Learning Material Markup Language (LMML)
  62. Legal Extensible Markup Language (LegalXML)
  63. Liturgical Markup Language (LitML)
  64. Log Markup Language (LOGML)
  65. Mail Markup Language (MML)
  66. Maker Markup Language (MML)
  67. Market Data Markup Language (MDML)
  68. Mathematical Markup Language (MathML)
  69. Meaningful Text Markup Language (MTML)
  70. Medical Markup Language (MML)
  71. Mind Reading Markup Language (MRML)
  72. Modest Markup Language (MML)
  73. Multimedia Retrieval Markup Language (MRML)
  74. Music Markup Language (MML)
  75. Outline Processor Markup Language (OPML)
  76. Opera Binary Markup Language(OBML)
  77. Pet Name Markup Language (PNML)
  78. Procedural Markup Language (PML)
  79. Predictive Model Markup Language
  80. Printing Industry Markup Language (PrintML)
  81. Question and Answer Markup Language (QAML)
  82. Quest Markup Language (QML)
  83. Relational-Functional Markup Language (RFML)
  84. Research Information Exchange Markup Language (RIXML)
  85. Rule Markup Language (RuleML)
  86. RESTful API Markup Language (RAML)
  87. Security Assertion Mark-up Language (SAML)
  88. Security Services Markup Language (S2ML)
  89. Simple Markup Language (SML)
  90. Simulation Module Markup Language (SiMMaL)
  91. Spacecraft Markup Language (SML)
  92. Standard Generalized Markup Language (SGML)
  93. Synchronization Markup Language [SyncML]
  94. Synthesis Markup Language
  95. Systems Biology Markup Language (SBML)
  96. Theological Markup Language (ThML)
  97. Transaction Authority Markup Language (XAML)
  98. Trading Partner Agreement Markup Language (TPAML)
  99. Textile markup language (TML)
  100. Transaction Authority Markup Language (XAML)
  101. Turing Machine Markup Language (TMML)
  102. Tutorial Markup Language (TML)
  103. ThML: Theological Markup Language
  104. Universal Rule Markup Language (URML)
  105. Virtual Reality Markup Language (VRML)
  106. Voice Extensible Markup Language (VoiceXML)
  107. Why Markup Language (YML)
  108. Wireless Markup Language (WML)
  109. Yet Another Markup Language (YAML)

Below I have links to the appropriate page on this site, on W3C and w3schools.

Below you see elements in grey, red and pink.
Elements in RED are in previous versions of HTML, but are not supported in HTML5. 1
Elements in GREEN  are new to HTML5 and have broad browser support.
Elements in PINK are new to HTML5, but don't yet have broad browser support.

The tags:

  • <kbd>
  • <keygen>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <map>
  • <mark>
  • <menu>
  • <meta>
  • <meter>
  • <nav>
  • <noframes>
  • <noscript>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <param>
  • <pre>
  • <progress>
  • <q>
  • <rp>
  • <rt>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <source>
  • <span>
  • <strike> 4
  • <strong>
  • <style>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <track>
  • <tt>
  • <u>
  • <ul>
  • <var>
  • <video> 5
  • <wbr>
  • The obsolete elements are including for those switching to HTML5 from earlier versions.
  • Use <abbr> instead.
  • Use <object> instead.
  • Use CSS instead.
  • It works, but for now quite difficult to use. This should be get easier in time.

HTML5 WITH LOCAL STORAGE

HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side and to overcome following drawbacks.

  1. Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.

  2. Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.

  3. Cookies are limited to about 4 KB of data . Not enough to store required data.

The two storages are session storage and local storage and they would be used to handle different situations.

The latest versions of pretty much every browser supports HTML5 Storage including Internet Explorer.

HTML5 Local Storage limit:

All browsers today offering 5-10 MB of storage in every user’s browser.i.e., For each domain 5MB of local storage.

HTML5 local storage supports different web apps and mobile apps.Local storage is used to store data locally/browser  to reduce communication needed with the server.

A page can store one or more key/value pairs in the browser’s local storage.And later use key to retrieve value. These can be done by Local Storage object in local storage API.

You may thing why Local Storage why not Web Storage,Web refers to something more and we are implementing at client side,local make sense instead of Web.

Html5 Local Storage Example:-

Before going to example first we will understand basic functions of html5 local storage. With “localstorage” object we can create a key using
setItem‘ method and to retrieve/read  value use ‘getItem‘ method.

 localstorage.setItem("Key0","value0"); 
var value = localstorage . getItem ( "key0" );
alert ( value );
Most of the browsers support local storage object but safer side you can check browser compatibility as shown below

 if (window["localStorage"]) { // your localStorage code here... }
And also keys are unique for example
local.storage.setItem("key1","value1");
local.storage.setItem("key1","value2");
var value = localstorage.getItem("key1");
alert(value);

Session Storage:

The DOM Storage mechanism is a means through which string key/value pairs can be securely stored and later retrieved for use.The Session Storage is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.

localStorage is the same as sessionStoragewith same same-origin rules applied but it is persistent. localStorage was introduced in Firefox 3.5.

Example:

HTML5 introduces the sessionStorage attribute which would be used by the sites to add data to the session storage, and it will be accessible to any page from the same site opened in that window ie session and as soon as you close the window, session would be lost.

Following is the code which would set a session variable and access that variable:

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">
if( sessionStorage.hits ){
sessionStorage.hits = Number(sessionStorage.hits) +1;
}else{
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>

</body>
</html>

Local Storage:

The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.I know you will be thinking why not cookies?Fact is that cookies do not handle this case well, because they are transmitted with every request and have limitation in terms of storage.

for example,

Following is the code which would set a local storage variable and access that variable every time this page is accessed, even next time when you open the window:

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>

</body>
</html>

Delete Web Storage:

Storing sensitive data on local machine could be dangerous and could leave a security hole.

The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.

To clear a local storage setting you would need to call localStorage.remove('key'); where 'key' is the key of the value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.

Following is the code which would clear complete local storage:

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">
localStorage.clear();

// Reset number of hits.
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refreshing the page would not to increase hit counter.</p>
<p>Close the window and open it again and check the result.</p>

</body>
</html>

The Web SQL Database API isn't actually part of the HTML5 specification but it is a separate specification which introduces a set of APIs to manipulate client-side databases using SQL.

I'm assuming you are a great web developer and if that is the case then no doubt, you would be well aware of SQL and RDBMS concepts.

Web SQL Database will work in latest version of Safari, Chrome and Opera.

The Core Methods: CRUD OPERATIONS

There are following three core methods defined in the spec that I.m going to cover in this tutorial:

  1. openDatabase: This method creates the database object either using existing database or creating new one.

  2. transaction: This method give us the ability to control a transaction and performing either commit or rollback based on the situation.

  3. executeSql: This method is used to execute actual SQL query.

Opening Database:

The openDatabase method takes care of opening a database if it already exists, this method will create it if it already does not exist.

To create and open a database, use the following code:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Above method took following five paramters:

  1. Database name
  2. Version number
  3. Text description
  4. Size of database
  5. Creation callback

The last and 5th argument, creation callback will be called if the database is being created. Without this feature, however, the databases are still being created on the fly and correctly versioned.

Executing queries:

To execute a query you use the database.transaction() function. This function needs a single argument, which is a function that takes care of actually executing the query as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

The above query will create a table called LOGS in 'mydb' database.

INSERT Operation:

To create enteries into the table we add simple SQL query in the above example as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});

We can pass dynamic values while creating entering as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS
(id,log) VALUES (?, ?'), [e_id, e_log];
});

Here e_id and e_log are external variables, and executeSql maps each item in the array argument to the "?"s.

READ Operation:

To read already existing records we use a callback to capture the results as follows:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});

Final Example:

So finally, let us keep this example in full fledged HTML5 document as follows and try to run it with Safari browser.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
msg = '<p>Log message created and row inserted.</p>';
document.querySelector('#status').innerHTML = msg;
});

db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>

This would produce following result with latest version of either Safari or Opera:

Log message created and row inserted.

Found rows: 2

foobar

logmsg

HTML EVENTS

When a user visit your website, they do things like click on text and images and given links, hover over things etc. These are examples of what JavaScript calls events.

We can write our event handlers in Javascript or vbscript and you can specify these event handlers as a value of event tag attribute. The HTML5 specification defines various event attributes as listed below:

There are following attributes which can be used to trigger any javascript or vbscript code given as value, when there is any event occurs for any HTM5 element.

We would cover element specific events while discussing those elements in detail in subsequent topics.

Attribute Value Description
offline script Triggers when the document goes offline
onabort script Triggers on an abort event
onafterprint script Triggers after the document is printed
onbeforeonload script Triggers before the document loads
onbeforeprint script Triggers before the document is printed
onblur script Triggers when the window loses focus
oncanplay script Triggers when media can start play, but might has to stop for buffering
oncanplaythrough script Triggers when media can be played to the end, without stopping for buffering
onchange script Triggers when an element changes
onclick script Triggers on a mouse click
oncontextmenu script Triggers when a context menu is triggered
ondblclick script Triggers on a mouse double-click
ondrag script Triggers when an element is dragged
ondragend script Triggers at the end of a drag operation
ondragenter script Triggers when an element has been dragged to a valid drop target
ondragleave script Triggers when an element leaves a valid drop target
ondragover script Triggers when an element is being dragged over a valid drop target
ondragstart script Triggers at the start of a drag operation
ondrop script Triggers when dragged element is being dropped
ondurationchange script Triggers when the length of the media is changed
onemptied script Triggers when a media resource element suddenly becomes empty.
onended script Triggers when media has reach the end
onerror script Triggers when an error occur
onfocus script Triggers when the window gets focus
onformchange script Triggers when a form changes
onforminput script Triggers when a form gets user input
onhaschange script Triggers when the document has change
oninput script Triggers when an element gets user input
oninvalid script Triggers when an element is invalid
onkeydown script Triggers when a key is pressed
onkeypress script Triggers when a key is pressed and released
onkeyup script Triggers when a key is released
onload script Triggers when the document loads
onloadeddata script Triggers when media data is loaded
onloadedmetadata script Triggers when the duration and other media data of a media element is loaded
onloadstart script Triggers when the browser starts to load the media data
onmessage script Triggers when the message is triggered
onmousedown script Triggers when a mouse button is pressed
onmousemove script Triggers when the mouse pointer moves
onmouseout script Triggers when the mouse pointer moves out of an element
onmouseover script Triggers when the mouse pointer moves over an element
onmouseup script Triggers when a mouse button is released
onmousewheel script Triggers when the mouse wheel is being rotated
onoffline script Triggers when the document goes offline
onoine script Triggers when the document comes online
ononline script Triggers when the document comes online
onpagehide script Triggers when the window is hidden
onpageshow script Triggers when the window becomes visible
onpause script Triggers when media data is paused
onplay script Triggers when media data is going to start playing
onplaying script Triggers when media data has start playing
onpopstate script Triggers when the window's history changes
onprogress script Triggers when the browser is fetching the media data
onratechange script Triggers when the media data's playing rate has changed
onreadystatechange script Triggers when the ready-state changes
onredo script Triggers when the document performs a redo
onresize script Triggers when the window is resized
onscroll script Triggers when an element's scrollbar is being scrolled
onseeked script Triggers when a media element's seeking attribute is no longer true, and the seeking has ended
onseeking script Triggers when a media element's seeking attribute is true, and the seeking has begun
onselect script Triggers when an element is selected
onstalled script Triggers when there is an error in fetching media data
onstorage script Triggers when a document loads
onsubmit script Triggers when a form is submitted
onsuspend script Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
ontimeupdate script Triggers when media changes its playing position
onundo script Triggers when a document performs an undo
onunload script Triggers when the user leaves the document
onvolumechange script Triggers when media changes the volume, also when volume is set to "mute"
onwaiting script Triggers when media has stopped playing, but is expected to resume

HTML5 Local Storage browser support:

Almost All browsers are supports HTML5 Local storage. I checked the Local storage API browser compatibility  in HTML5test.com Here is the  result   click here.

Internet explorer 6,7 ,Opera 10 ,Firefox 3.0 are not supporting this HTML5 local storage API anyway we are not using these browsers now a days