HTML5 is the latest HTML standard. It walks hand in hand with CSS3, the latest CSS standard.
HTML5 includes:
- New HTML elements and attributes
- Full CSS3 Support
- Video and audio elements
- 2D/3D graphics
- Local storage
- Local SQL database
What is New in HTML5?
HTML5 has scene new updated elements:
- Doctype
- Meta declaration
- Script tag
- Link tag
DOCTYPE
The DOCTYPE declaration for HTML5 is very simple. But let's look at the doctypes before HTML5:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
The new HTML5 doctype:
<!DOCTYPE html>
META DECLARATION
The meta declaration in HTML4:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
In HTML5, this has been simplified:
<meta charset="UTF-8">
SCRIPT TAG
In HTML 4.01, we specify the type attribute as text/javascript:
<script type="text/javascript" src="file.js"></script>
In HTML5, the type attribute is not needed, as the browser will infer javascript as the type:
<script src="file.js"></script>
LINK TAG
The link tag in HTML 4.01:
<link rel="stylesheet" type="text/css" href="file.css">
Again, in HTML5, we don't need the type attribute on the link tag.
<link rel="stylesheet" href="file.css">
EXISTING HTML5 TAG UPDATES
In HTML4, the i and b tags were font style elements:
- The i tag rendered an italic font style
- The b tag rendered a bold font style
In HTML5, these tags have new meanings:
- The i tag represents text in an alternate voice or mood
- The b tag represents stylistically offset text
EXISTING HTML5 TAG UPDATES
Some example uses for the i tag:
- Taxonomic designation
- Technical term
- Idiomatic phrase from another language
- Transliteration
- A thought
- Ship name in Western texts
Example usage of the i tag:
<i>I hope this works</i>, he thought.
Here the words in side i tags depicting a text in an alternative voice or mood.
Some example uses for the b tag:
- Key words in a document abstract
- Product names in a review
- Actionable words in interactive text-driven software
- Article lead
Example usage of the b tag:
<b class="lead">The event takes place this upcoming Saturday, and
over 3,000 people have already registered.**
This article lead is stylistically offset.
In HTML4:
- The
<em>tag meant emphasis - The
<strong>tag meant strong emphasis
But in HTML5, the em and strong tags have new meanings:
- The
<em>tag now means stress emphasis - The
<strong>tag now means strong importance
Example usage of the em tag:
Make sure to sign up `before` the day of the event, September
16, 2013.
Here we're giving stress emphasis to before.
Example usage of the <strong> tag:
Make sure to sign up <em>before</em> the day of the event,
<strong>September 16, 2013</strong>".
Here we're giving strong importance to the date of the event.