Most of this information is available on the net. I have compiled into a single document for easy reading.
Elements
Elements that we should start using for our html 5 compliant websites
Image and caption
Old way:
< div class="graph" id="figure1">
< img src="graph.jpg" alt="Price of chocolate since 2008">
< p class="caption">Figure 1: Chocolate has increased in price by 200% since 2008.</p>
< /div>
New Way:
< figure class="graph" id="figure1">
< img src="graph.jpg" alt="Price of chocolate since 2008">
< figcaption>Figure 1: Chocolate has increased in price by 200% since 2008.</figcaption>
< /figure>
FORM
Usually we use tables or a label with element nested inside a p or div tags. The best way moving forward is to use DL DT DD tag. This is called description list.
< dl>
< dt>Coffee</dt>
< dd>Black hot drink</dd>
< dt>Milk</dt>
< dd>White cold drink</dd>
< /dl>
Styling required attribute in HTML5
input[required], input:required
{
border: 1px solid #c00;
}
Using a label with the input element. Use approach #2 as it is easy on eyes and easy to style :)
Approach #1:
< p>
< label for="your_name">Your name:</label>
< input type="text" name="your_name" id="your_name" required>
< /p>
Approach #2:
< label>Your name:
< input type="text" name="your_name" id="your_name" required>
< /label>
Email Element
< p>
< label for="email">E-mail address</label>
< input type="email" name="email" id="email" required>
< /p>
Use "multiple" to let the user input more than 1 email address. "Multiple" attribute could be used with any element where we want to collect more than one item.
Telephone: The big advantage of using tel instead of text is to trigger a telephone input screen
in browsers that support it.
< p>
< label for="telephone">Telephone number:</label>
< input type="tel" name="telephone" id="telephone"
placeholder="(000) 000-0000"
pattern="\([2-9][0-9]{2}\) [0-9]{3}-[0-9]{4}">
< /p>
URL: The url input type works much the same way as email does
< p>
< label for="url">Please provide a web site where we can learn more:</label>
< input type="url" name="current_site" id="current_site"
placeholder="http://www.example.com/"
pattern="http(|s)://[-0-9a-z]{1,253}\.[.a-z]{2,7}">
< /p>
Sample complete Form:
< form action="./script" method="POST">
< p>
< label for="your_name">Your name:</label>
< input type="text" name="your_name" id="your_name">
< /p>
< p>
< label for="city">City of residence:</label>
< input type="text" name="city" id="city">
< /p>
< p>
< label for="email">E-mail address (separate multiple e-mail addresses with a comma):</label>
< input type="email" name="email" id="email" placeholder="jane.doe@example.com" multiple >
< /p>
< p>
< label for="tel">Telephone number:</label>
< input type="tel" name="phone_number" if="phone_number"
placeholder="(000) 000-0000"
pattern="\([2-9][0-9]{2}\) [0-9]{3}-[0-9]{4}">
< /p>
< p>
< label for="url">Please provide a web site where we can learn more:</label>
< input type="url" name="current_site" id="current_site"
placeholder="http://www.example.com/"
pattern="http(|s)://[-0-9a-z]{1,253}\.[.a-z]{2,7}">
< /p>
< p>
< label for="project">Tell us your story idea:</label>
< textarea name="story_idea" id="story_idea"
placeholder="Briefly tell us what we should write about and why."
maxlength="2000"></textarea>
< /p>
< p>
< button type="submit">Send it!</button>
< /p>
< /form>
Uploading File
Add enctype="multipart/form-data" to the form tag
We can also restrict what files can be uploaded in the browser with the accept attribute. The value of accept may be any of the following:
* audio/*, video/*, image/*
* a valid MIME type such as image/png or text/plain
* a file extension that begins with '.'
* add multiple attribute to upload more than one file
< input type="file" multiple name="upload" id="upload" accept=".mp3,.ogv">
The DataList Element:
With the datalist element, we can add a predefined set of options to any form input control.
First create the DataList Element
< datalist id="where_we_fly">
<option>Accra, Ghana</option>
<option>Paris, France</option>
<option>Melbourne, Australia</option>
<option>Lima, Peru</option>
<option>Los Angeles, United Sates</option>
<option>Kuala Lumpur, Malaysia</option>
< /datalist>
Now associate it with the input element
< p>
<label for="destination">Where would you like to go?</label>
<input type="text" name="destination" id="destination" value=""
list="where_we_fly">
< /p>Other Input Types
■ search
■ range
■ number
■ color
■ datetime and datetime-local
■ date
■ month
■ week
■ time
It’s possible to determine whether a browser supports a particular input type by testing the value returned by its type attribute. If a browser doesn’t support a particular type, the value of its type attribute will default to text. For example, consider the following range input:
< input type="range" value="" id="slider">
We could test for browser support using the following bit of JavaScript code.
var hasRange = function( elID ){
return document.getElementById( elID ).type == 'range';
}
In browsers that do not support range, the function above will return false. Otherwise, it will return true. Libraries such as Modernizr4 make it easier to check for support.
input type="search"
For the most part, search operates like the text input type. It merely provides a type that can be visually distinct from text boxes. For example, in Safari, Chrome, and Opera 15 on Mac OS X, search input fields have rounded corners.
input type="range"
The range input type presents the user with a slider control that’s well suited to approximate value inputs between an upper and lower boundary. By default, it’s a horizontal control. However with some CSS (transform: rotate(-90deg)), you can also display range inputs vertically.
By default, the upper and lower boundaries of the range type are 0 and 100. Change this by setting the min and max attributes. You can also control the 'smoothness' and precision of the thumb position using the step attribute as shown below.
< input type="range" value="" min="0" max="100" step="10">
Every time the user moves the thumb on this range input control, the value of the range will increase or decrease by 10 between 0 and 100. You can also control precision by associating a datalist element with the range input. Each option will be rendered as a 'notch' along the width of the range in browsers that support it—to date, that’s Chrome and Opera 15.
Unfortunately, range isn’t supported in Internet Explorer 9 and older or Firefox 22 and older. In those browsers, the form control will be a text box instead of a range element.
input type="number"
The number type is another form control type for numeric input values. According to the specification, any floating point number is a valid value. But that is not completly true.
By default, the number input type only accepts integers. Entering 4.2776, will cause a validation error in conforming browsers. In order to accept floating point values, we need to set the step attribute.
For example, when step="0.5", both 1.5 and 98 are valid values, but 88.1 is not.
When step=".01", however, 88.1, 1.5, and 98 are all valid values, as is 3.14.
Increments number by 0.5
< input type="number" name="num" id="num" value="" step=".05">
Increments number by .01; precision to the hundredth
< input type="number" name="num" id="num" value="" step=".01">
Increments number by 0.001; precision to the thousandth
< input type="number" name="num" id="num" value="" step=".001">
In order to make our 4.2776 value an accepted one, we would need to use set our step attribute to .0001. Unfortunately, this workaround does not work in Opera 12 and older versions.
Date and Time Inputs
There are six of them, listed below.
■ datetime: Select a date and time as a global, forced-UTC string
■ datetime-local: Select a date and time in the user’s local time zone
■ date: Select a single date with a time component of midnight UTC
■ month: Select a month and year
■ week: Select a week and year
■ time: Select a time in hours and minutes
Browsers that support these types will display a time picker widget (for the time type), a date picker widget (for date, month, and week), or both (datetime and datetime-local)
input type="color"
With the color input type, we can add a native color picker control to our applications.
Multimedia Audio Video
< video src="path_to_file.video"></video>
< audio src="path_to_file.audio"></audio>
However, this alone is not enough because it will be stuck at the first frame
What we need are some controls: perhaps a play button and a scrubbable progress bar. We might also want a timer that reveals how much of the media has played, and a volume control. Luckily for us, browsers have these built-in to their audio and video support. We can activate them by adding the controls attribute.
< video src="path_to_file.video" controls>
and we can very easy do loop and auto play as well
< video src="path_to_file.video" autoplay loop></video>
< audio src="path_to_file.audio" autoplay loop></audio>
Video only attributes:
■ height: Sets the height of the video player.
■ width: Sets the width of the video player.
■ poster: Specifies an image to display prior to video playback.
We could also put a poster image for the video
< video src="path_to_file.video" poster="path_to_poster_image.jpg"></video>
Be careful with the size of your poster image. Ideally, it should be the same dimensions as your video.
Setting an explicit height and width for the video player prevents this resizing.
Bandwidth use and play back responsiveness
You can change this behavior with the preload attribute. Set it to one of three possible values:
■ metadata tells the browser that it’s okay to download a portion of the file.
■ auto tells the browser that it’s okay to download as much of the video as it wants.
■ none tells the browser not to download anything until the user requests it.
Multipe audio or video files
< audio controls>
<source src="path_to_mpeg3_file.mp3">
<source src="path_to_ogg_file.ogg">
< /audio>
or
< audio controls>
<source src="mpeg3_file.mp3" type="audio/mpeg">
<source src="ogg_vorbis_file.ogg" type="audio/ogg; codecs=vorbis">
<source src="ogg_flac_file.oga" type="audio/ogg; codecs=flac">
< /audio>
Elements
Elements that we should start using for our html 5 compliant websites
- header
- footer
- section
- nav
- aside
- main --- this is really important. Each page should have this around the main store of that page.
- figure & figcaption
Image and caption
Old way:
< div class="graph" id="figure1">
< img src="graph.jpg" alt="Price of chocolate since 2008">
< p class="caption">Figure 1: Chocolate has increased in price by 200% since 2008.</p>
< /div>
New Way:
< figure class="graph" id="figure1">
< img src="graph.jpg" alt="Price of chocolate since 2008">
< figcaption>Figure 1: Chocolate has increased in price by 200% since 2008.</figcaption>
< /figure>
FORM
Usually we use tables or a label with element nested inside a p or div tags. The best way moving forward is to use DL DT DD tag. This is called description list.
< dl>
< dt>Coffee</dt>
< dd>Black hot drink</dd>
< dt>Milk</dt>
< dd>White cold drink</dd>
< /dl>
Styling required attribute in HTML5
input[required], input:required
{
border: 1px solid #c00;
}
Using a label with the input element. Use approach #2 as it is easy on eyes and easy to style :)
Approach #1:
< p>
< label for="your_name">Your name:</label>
< input type="text" name="your_name" id="your_name" required>
< /p>
Approach #2:
< label>Your name:
< input type="text" name="your_name" id="your_name" required>
< /label>
Email Element
< p>
< label for="email">E-mail address</label>
< input type="email" name="email" id="email" required>
< /p>
Use "multiple" to let the user input more than 1 email address. "Multiple" attribute could be used with any element where we want to collect more than one item.
Telephone: The big advantage of using tel instead of text is to trigger a telephone input screen
in browsers that support it.
< p>
< label for="telephone">Telephone number:</label>
< input type="tel" name="telephone" id="telephone"
placeholder="(000) 000-0000"
pattern="\([2-9][0-9]{2}\) [0-9]{3}-[0-9]{4}">
< /p>
URL: The url input type works much the same way as email does
< p>
< label for="url">Please provide a web site where we can learn more:</label>
< input type="url" name="current_site" id="current_site"
placeholder="http://www.example.com/"
pattern="http(|s)://[-0-9a-z]{1,253}\.[.a-z]{2,7}">
< /p>
Sample complete Form:
< form action="./script" method="POST">
< p>
< label for="your_name">Your name:</label>
< input type="text" name="your_name" id="your_name">
< /p>
< p>
< label for="city">City of residence:</label>
< input type="text" name="city" id="city">
< /p>
< p>
< label for="email">E-mail address (separate multiple e-mail addresses with a comma):</label>
< input type="email" name="email" id="email" placeholder="jane.doe@example.com" multiple >
< /p>
< p>
< label for="tel">Telephone number:</label>
< input type="tel" name="phone_number" if="phone_number"
placeholder="(000) 000-0000"
pattern="\([2-9][0-9]{2}\) [0-9]{3}-[0-9]{4}">
< /p>
< p>
< label for="url">Please provide a web site where we can learn more:</label>
< input type="url" name="current_site" id="current_site"
placeholder="http://www.example.com/"
pattern="http(|s)://[-0-9a-z]{1,253}\.[.a-z]{2,7}">
< /p>
< p>
< label for="project">Tell us your story idea:</label>
< textarea name="story_idea" id="story_idea"
placeholder="Briefly tell us what we should write about and why."
maxlength="2000"></textarea>
< /p>
< p>
< button type="submit">Send it!</button>
< /p>
< /form>
Uploading File
Add enctype="multipart/form-data" to the form tag
We can also restrict what files can be uploaded in the browser with the accept attribute. The value of accept may be any of the following:
* audio/*, video/*, image/*
* a valid MIME type such as image/png or text/plain
* a file extension that begins with '.'
* add multiple attribute to upload more than one file
< input type="file" multiple name="upload" id="upload" accept=".mp3,.ogv">
The DataList Element:
With the datalist element, we can add a predefined set of options to any form input control.
First create the DataList Element
< datalist id="where_we_fly">
<option>Accra, Ghana</option>
<option>Paris, France</option>
<option>Melbourne, Australia</option>
<option>Lima, Peru</option>
<option>Los Angeles, United Sates</option>
<option>Kuala Lumpur, Malaysia</option>
< /datalist>
Now associate it with the input element
< p>
<label for="destination">Where would you like to go?</label>
<input type="text" name="destination" id="destination" value=""
list="where_we_fly">
< /p>Other Input Types
■ search
■ range
■ number
■ color
■ datetime and datetime-local
■ date
■ month
■ week
■ time
It’s possible to determine whether a browser supports a particular input type by testing the value returned by its type attribute. If a browser doesn’t support a particular type, the value of its type attribute will default to text. For example, consider the following range input:
< input type="range" value="" id="slider">
We could test for browser support using the following bit of JavaScript code.
var hasRange = function( elID ){
return document.getElementById( elID ).type == 'range';
}
In browsers that do not support range, the function above will return false. Otherwise, it will return true. Libraries such as Modernizr4 make it easier to check for support.
input type="search"
For the most part, search operates like the text input type. It merely provides a type that can be visually distinct from text boxes. For example, in Safari, Chrome, and Opera 15 on Mac OS X, search input fields have rounded corners.
input type="range"
The range input type presents the user with a slider control that’s well suited to approximate value inputs between an upper and lower boundary. By default, it’s a horizontal control. However with some CSS (transform: rotate(-90deg)), you can also display range inputs vertically.
By default, the upper and lower boundaries of the range type are 0 and 100. Change this by setting the min and max attributes. You can also control the 'smoothness' and precision of the thumb position using the step attribute as shown below.
< input type="range" value="" min="0" max="100" step="10">
Every time the user moves the thumb on this range input control, the value of the range will increase or decrease by 10 between 0 and 100. You can also control precision by associating a datalist element with the range input. Each option will be rendered as a 'notch' along the width of the range in browsers that support it—to date, that’s Chrome and Opera 15.
Unfortunately, range isn’t supported in Internet Explorer 9 and older or Firefox 22 and older. In those browsers, the form control will be a text box instead of a range element.
input type="number"
The number type is another form control type for numeric input values. According to the specification, any floating point number is a valid value. But that is not completly true.
By default, the number input type only accepts integers. Entering 4.2776, will cause a validation error in conforming browsers. In order to accept floating point values, we need to set the step attribute.
For example, when step="0.5", both 1.5 and 98 are valid values, but 88.1 is not.
When step=".01", however, 88.1, 1.5, and 98 are all valid values, as is 3.14.
Increments number by 0.5
< input type="number" name="num" id="num" value="" step=".05">
Increments number by .01; precision to the hundredth
< input type="number" name="num" id="num" value="" step=".01">
Increments number by 0.001; precision to the thousandth
< input type="number" name="num" id="num" value="" step=".001">
In order to make our 4.2776 value an accepted one, we would need to use set our step attribute to .0001. Unfortunately, this workaround does not work in Opera 12 and older versions.
Date and Time Inputs
There are six of them, listed below.
■ datetime: Select a date and time as a global, forced-UTC string
■ datetime-local: Select a date and time in the user’s local time zone
■ date: Select a single date with a time component of midnight UTC
■ month: Select a month and year
■ week: Select a week and year
■ time: Select a time in hours and minutes
Browsers that support these types will display a time picker widget (for the time type), a date picker widget (for date, month, and week), or both (datetime and datetime-local)
input type="color"
With the color input type, we can add a native color picker control to our applications.
Multimedia Audio Video
< video src="path_to_file.video"></video>
< audio src="path_to_file.audio"></audio>
However, this alone is not enough because it will be stuck at the first frame
What we need are some controls: perhaps a play button and a scrubbable progress bar. We might also want a timer that reveals how much of the media has played, and a volume control. Luckily for us, browsers have these built-in to their audio and video support. We can activate them by adding the controls attribute.
< video src="path_to_file.video" controls>
and we can very easy do loop and auto play as well
< video src="path_to_file.video" autoplay loop></video>
< audio src="path_to_file.audio" autoplay loop></audio>
Video only attributes:
■ height: Sets the height of the video player.
■ width: Sets the width of the video player.
■ poster: Specifies an image to display prior to video playback.
We could also put a poster image for the video
< video src="path_to_file.video" poster="path_to_poster_image.jpg"></video>
Be careful with the size of your poster image. Ideally, it should be the same dimensions as your video.
Setting an explicit height and width for the video player prevents this resizing.
Bandwidth use and play back responsiveness
You can change this behavior with the preload attribute. Set it to one of three possible values:
■ metadata tells the browser that it’s okay to download a portion of the file.
■ auto tells the browser that it’s okay to download as much of the video as it wants.
■ none tells the browser not to download anything until the user requests it.
Multipe audio or video files
< audio controls>
<source src="path_to_mpeg3_file.mp3">
<source src="path_to_ogg_file.ogg">
< /audio>
or
< audio controls>
<source src="mpeg3_file.mp3" type="audio/mpeg">
<source src="ogg_vorbis_file.ogg" type="audio/ogg; codecs=vorbis">
<source src="ogg_flac_file.oga" type="audio/ogg; codecs=flac">
< /audio>
