HTML5 Introduction

HTML5 examples in each chapter

Example

<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
 Your browser does not support the video tag.
</video>
</body>
</html>

Try It Yourself

Click 'Try It Yourself' to see how this example runs.

What is HTML5?

HTML5 is the latest HTML standard.

HTML5 is designed to carry rich web content without the need for additional plugins.

HTML5 has new semantic, graphic, and multimedia elements.

The new elements and APIs provided by HTML5 simplify the construction of web applications.

HTML5 is cross-platform and designed to run on different types of hardware (PCs, tablets, smartphones, televisions, etc.).

Note:In the following chapters, you will learn how to 'help' older browsers handle HTML5.

What's new in HTML5?

The new document type (DOCTYPE) declaration in HTML5 is very simple:

<!DOCTYPE html>
The new character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">

HTML5 Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>

Note:The default character encoding in HTML5 is UTF-8.

HTML5 - New Attribute Syntax

HTML5 standard allows 4 different attribute syntaxes.

This example demonstrates the different syntaxes used in the <input> tag:

Type Example
Empty <input type="text" value="Bill Gates" disabled>
Unquoted <input type="text" value=Bill Gates>
Double-quoted <input type="text" value="Bill Gates">
Single-quoted <input type="text" value='Bill Gates'>

In the HTML5 standard, all 4 syntaxes may be used according to the need for attributes.

HTML5 - New Features

Some of the most interesting new features of HTML5:

  • New semantic elements, such as <header>, <footer>, <article>, and <section>.
  • New form controls, such as numbers, dates, times, calendars, and sliders.
  • Powerful image support (via <canvas> and <svg>)
  • Powerful multimedia support (via <video> and <audio>)
  • Powerful new APIs, such as using local storage instead of cookies.

HTML5 - Removed Elements

The following HTML 4.01 elements have been removed from HTML5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>