New Features in HTML5 - Everything You Need to Know

INTRODUCTION

HTML is a markup language for defining the content and structure of document. Any HTML document consists of a series of elements. Each element can have multiple attributes.

New Semantic Elements

HTML5 introduces elements that improve the meaning and readability of HTML code:

• <article>: This element represents a complete and independent piece of content.
• <aside>: It represents a portion of webpage whose content is not directly related to main content of document. It is generally used to create sidebar.
• <details>: It creates a disclosure widget which can be toggled into open and close state.
• <figcaption>: It represents a caption used to describe the content of its parent <figure> element.
• <figure>: It represents an independent piece of content. It can be image, illustration, diagram, code snippet etc.
• <footer>: It represents footer for its nearest parent content.
• <header>: It represents introductory content which generally include logo, author name or navigation links.
• <mark>: This element represents text which is marked or highlighted because of its relevance in the content.
• <main>: This element represents the main content of the webpage. It should be related to the central topic of webpage.
• <nav>: This element represents a section of webpage which contains navigation links.
• <summary>: This element specifies summary or caption for the <details> element.
• <section>: This element represents a general independent section of the document.
• <time>: This element represents a specific period in time.

Multimedia Support

New elements to natively support audio and video without plugins like Flash:

• <audio> : This element is use to embed audio/sound in webpage.
• <video> : This element is use to embed a media player in webpage. This media player is used to play video.
• <source> : This element specifies media resource for <picture>, <audio> and <video> element.
• <track> : This element is used to specify a timed text track that can be displayed in parallel with media element.

Canvas for Graphics and Animation

• <canvas>: This element is used with the canvas API to draw graphics and animations.

New Form Elements

HTML5 added new input types and form attributes for better usability:

1. date

<input> element of type="date" is used to create an input field that allows user to enter a date.

Example:

2. time

<input> element of type="time" is used to create an input field that allows user to enter a time.

Example:

3. email

<input> element of type="date" is used to create an input field that allows user to enter a date.

Example:

4. url

<input> element of type="date" is used to create an input field that allows user to enter a URL.

Example:

5. number

<input> element of type="time" is used to create an input field that allows user to enter a time.

Example:

6. tel

<input> element of type="time" is used to create an input field that allows user to enter a time.

Example:

7. search

<input> element of type="time" is used to create an input field that allows user to enter a time.

Example:

8. range

<input> element of type="time" is used to create an input field that allows user to enter a time.

Example:

9. color

<input> element of type="time" is used to create an input field that allows user to enter a time.

Example:

APIs for Better Functionality

HTML5 comes with various APIs to support dynamic and interactive content:

• <Geolocation API> : This API uses cellular data, cell tower data, wifi access pint data to return latitude/longitude coordinates and accuracy radius.
• <Web Storage API > : This API provides mechanism by which browser can store key/value pairs locally.
• <Drag-and-Drop API> : This API enable developers to provide drag and drop features in browsers.
• <Web Workers> : Web workers allows a script to run in background thread which is separate from the main execution thread of web application.
• <History API> : This API allows access to the browser's session history. You can navigate back and forth in the user's history and also manipulate it.
• <WebSockets> : This API is used to create a two-way communication session between user's browser and server. You can send message to server and receive responses.

Improved Support for Mobile Devices

HTML5 is designed with mobile-friendly features, such as responsive design support, viewport control and touch events. You can learn about viewport in detail at our Mastering Viewport: A Beginners's Guide page.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Native Support for SVG and MathML

• SVG (Scalable Vector Graphics) : SVG is an XML based markup language. It is used for defining two-dimensional vector graphics. The <svg> element is a container for SVG graphics. This element embeds SVG graphics into HTML document.
• MathML : MathML is an XML based language for describing mathematical notation. It uses a set of HTML like elements (<math>) which can be placed inside HTML document.

Removal of Deprecated Elements

The elements in this section are obsolete and is not used by Web developers. These elements are not used because it creates confusion and their Functionality is better handled by CSS.

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

Difference Between HTML and HTML5

HTML5 is a major improvement over HTML, making websites faster, more interactive, and mobile-friendly. It reduces reliance on third-party plugins and enhances web development with better structure, multimedia, and API support.

Frequently Asked Questions (FAQ)