HTML5 Introduction

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/li>

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:

<p><i>I hope this works</i>, he thought.</p>

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:

<p><b class="lead">The event takes place this upcoming Saturday, and
over 3,000 people have already registered.</b></p>

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:

<p>Make sure to sign up <em>before</em> the day of the event, September
16, 2013.</p>

Here we’re giving stress emphasis to before.

Example usage of the strong tag:

<p>Make sure to sign up <em>before</em> the day of the event,
<strong>September 16, 2013</strong>.</p>

Here we’re giving strong importance to the date of the event.

Be first to comment

Leave a Reply