What is HTML5?

► HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language.
The markup language is used to define the text document within the tag which defines the structure of web
pages. HTML 5 is the fifth and current version of HTML.
Advantages:
► All browsers supported.
► More device friendly.
► Easy to use and implement.
► HTML 5 is integration with CSS, JavaScript, etc. can help build beautiful websites.
Disadvantages:
► Long codes have to be written which is time consuming.
► Only modern browsers support it.
New features of HTML5

HTML5 introduced several new features and improvements over its predecessors, making
web development more efficient, interactive, and user-friendly. Here are some key features:

1. New Semantic Elements

● <header> - Represents the header section of a page or section.

● <footer> - Represents the footer section of a page or section.
● <article> - Defines independent, self-contained content.
● <section> - Represents a generic section of a document.
● <nav> - Represents navigation links.
● <aside> - Defines content aside from the main content.
● <figure> & <figcaption> - Used for images, illustrations, and captions.

2. Enhanced Multimedia Support

● <audio> - Embeds audio files directly into web pages.

● <video> - Supports video playback without third-party plugins like Flash.
● <track> - Adds subtitles and captions to video elements.
3. Canvas & SVG for Graphics

● <canvas> - Allows drawing graphics using JavaScript (e.g., animations, games).

● SVG (Scalable Vector Graphics) - Supports vector-based graphics.

4. Form Enhancements

● New input types:

○ email, date, time, number, range, search, tel, url, color.
● New attributes:
○ placeholder, autofocus, required, pattern, autocomplete.

5. Improved APIs & Functionality

● Web Storage (localStorage & sessionStorage) - Stores data on the client side.
● Geolocation API - Gets the user's geographical location.
● Drag & Drop API - Enables drag-and-drop functionality.
● WebSockets API - Enables real-time communication between client and server.
● History API - Manages browser history without page reloads

.
6. Offline & Performance Features

● Service Workers - Enables offline caching and background sync.

● Web Workers - Runs scripts in the background to improve performance.

7. Responsive & Mobile-Friendly Features

● Viewport Meta Tag - Controls layout on mobile devices.

● Media Queries - Adapts styles based on screen size.
Why HTML5?

1. Better Structure – Provides a clear and organized way to structure web pages.
2. Responsive Design – Works well on different screen sizes, including mobile devices.
3. Multimedia Support – Supports audio and video without extra plugins like Flash.
4. Semantic Elements – Improves readability with tags like <article>, <header>, and <footer>.
5. Improved Forms – Offers new input types like <email> and <date> for better user experience.
6. Offline Browsing – Allows web apps to work offline using the cache feature.
7. Better Performance – Reduces the need for external scripts, making websites faster.
8. Geolocation API – Helps in tracking user location for maps and navigation.
9. Canvas & SVG – Enables drawing graphics and animations without extra software.
10. Cross-Browser Compatibility – Works smoothly on modern web browsers.
New Elements in HTML5
In HTML5, there are lots of new elements are added which provides some extra
functionality to create an attractive and dynamic website. With the help of these elements,
you can make your code easy and quick.
1. Structural (Semantic) Elements
Tag Description
<header> Defines the header of a webpage or section.
<nav>. Contains navigation links.
<section> Groups related content together.
Represents standalone content (e.g., blog post,
<article>
news).
<aside> Defines side content (e.g., sidebars).
<footer> Defines the footer of a webpage or section.
<main> Specifies the main content of a webpage.
<figure> Groups media elements like images or diagrams.
<figcaption> Provides captions for <figure>.
<mark> Highlights important text.
<time> Represents a specific time or date.
<summary> Provides a summary for <details>.
<details> Creates a collapsible section of content.
2. Multimedia Elements

► HTML5 makes it easier to embed audio and video content without

external plugins (like Flash).

Tag Description
<audio> Embeds an audio file.
<video> Embeds a video file.
Provides multiple sources for
<source>
<audio> and <video>.
<track> Adds captions/subtitles to <video>.
3. Graphics and Media Elements
► These elements allow drawing graphics, animations, and scalable
images directly in HTML.
Tag Description

<canvas> Used for drawing graphics via JavaScript.

Defines scalable vector graphics.

<svg>
used for displaying two-dimensional graphic

4. Form Elements and Input Enhancements

► HTML5 introduced new form elements to improve user experience and
validation.
Tag Description
Provides a dropdown list of suggestions for
<datalist>
<input>.
<output> Displays the result of a calculation.
<progress> Represents a progress bar.
<meter> Displays a measurement within a range.
What's new in HTML5?

1. Structural (Semantic) Elements

• <header> – Defines a header for a webpage or section.
• <nav> – Represents navigation links.
• <section> – Defines a section in a document.
• <article> – Represents independent content (e.g., blog posts, news articles).
• <aside> – Used for side content like sidebars.
• <footer> – Defines a footer for a webpage or section.
• <main> – Represents the main content of a webpage.
• <figure> – Groups media elements like images, diagrams, and illustrations.
• <figcaption> – Provides a caption for the <figure> element.
• <mark> – Highlights text for emphasis.
• <time> – Represents a specific time or date.
• <summary> – Provides a summary for <details>.
• <details> – Creates a collapsible section.
2. Multimedia Elements
• <audio> – Embeds audio files without requiring plugins.
• <video> – Embeds video files.
• <source> – Specifies multiple media sources for <audio> and <video>.
• <track> – Provides captions and subtitles for videos.

3. Graphics and Media Elements

• <canvas> – Used for drawing graphics and animations via JavaScript.
• <svg> – Supports Scalable Vector Graphics for images and illustrations.

4. Form Elements and Input Enhancements

• <datalist>– Provides an autocomplete feature for <input>.
• <output> – Displays the result of calculations.
• <progress> – Represents a progress bar.
• <meter> – Displays a measurement within a known range.
5. Interactive Elements
► These elements enhance user interaction and accessibility.

Tag Description
<details> Creates a collapsible content section.
<summary> Provides a heading for <details>.

6. Deprecated Elements in HTML5

► With the introduction of new elements, some older elements are no
longer used.
Deprecated Tag Replacement
<font> Use CSS instead.
<center> Use CSS (text-align: center;).
<big> Use CSS (font-size: larger;).
<blink> Removed, no replacement.
The New <canvas> Element

► The HTML canvas element provides HTML a bitmapped surface to

work with. It is used to draw graphics on the web page.
► The HTML 5 <canvas> tag is used to draw graphics using scripting
language like JavaScript.
► The <canvas> element is only a container for graphics, you must need a
scripting language to draw the graphics. The <canvas> element allows
for dynamic and scriptable rendering of 2D shapes and bitmap images.
► It is a low level, procedural model that updates a bitmap and does not
have a built-in scene. There are several methods in canvas to draw
paths, boxes, circles, text and add images.
New Media Elements
Media elements in HTML5 are special tags that allow you to add audio,
video, and interactive content to a webpage without needing extra
plugins like Flash. They make it easy to play music, show videos, add
captions, and embed external content.

<audio> It defines sound content.

It defines a container for

<embed> external
files/application/media.
It defines multiple media
<source> resources for the media
elements.
It defines text tracks for
<track>
<audio> and <video> files
It defines video content
<video>
within HTML document.
New Form Elements

Form elements in HTML5 are used to collect user input in a structured

way. HTML5 introduced several new elements and attributes to improve
forms, making them more interactive, user-friendly, and efficient.

It represent predefined list for

<datalist>
input <option> element.

It is used a container element

to represent the output of a
<output>
calculation or outcome of
user action.
New Semantic/Structural Elements
Semantic elements in HTML5 are tags that have a clear meaning about the type of content they contain.
They help both browsers and developers understand the structure of a webpage.
Before HTML5, developers used <div> and <span> for almost everything,
making it difficult to read and maintain code. HTML5 introduced semantic elements
to improve SEO, accessibility, and readability.
Element Description
<header> Defines the header section of a webpage or a section.
<nav> Represents a section with navigation links.
<section> Groups related content together.
Represents an independent piece of content (like a blog
<article>
post).
<aside> Contains side content like ads, sidebars, or extra info.
<footer> Defines the footer section of a webpage or a section.
Represents the main content of the document (excluding
<main>
headers, sidebars, etc.).
Used to group media (images, videos, charts) with a
<figure>
caption.
<figcaption> Provides a caption for a <figure>.
<mark> Highlights text.
<time> Represents a date/time.
Benefits of Using Semantic Elements

Better Readability – Code is easier to read and understand.

SEO Improvement – Helps search engines index the content properly.
Accessibility – Assists screen readers and other assistive technologies.
Better Structure – Clearly defines different sections of a webpage.
Future-Proofing – Modern browsers fully support semantic elements.
HTML5 New Input Types
HTML5 introduced several new input types to enhance form
functionality and improve user experience. These new types allow for
better validation, easier data entry, and more efficient form handling
without relying heavily on JavaScript.
Type Description
color It represents an input field which defines a color selector.
date It represents an input field to define a date selector.
datetime It defines full date and time display with time zone information.
datetime-local It defines date and time without time zone information.
email It defines an input field with email pattern Validation.
month It defines the input field to enter month for the particular year
number It defines field which selects a numeric value only.
range It defines a numeric value selector with a given range of 1 to 100.
search It is used to define a search field.
tel It represents a control to enter a telephone number.
time It represents a control to enter time value with no time zone.
url It represents an input field to enter a URL
week It defines a selector for week value for the particular year.
HTML5 form elements

The HTML <form> element can contain one or more of the following
form elements:

● <input>
● <label>
● <select>
● <textarea>
● <button>
● <fieldset>
● <legend>
● <datalist>
● <output>
● <option>
● <optgroup>
The <input> Element

One of the most used form elements is the <input> element.

The <input> element can be displayed in several ways, depending on the type
attribute.

Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
The <label> Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input
element.

The <label> element also help users who have difficulty clicking on very
small regions (such as radio buttons or checkboxes) - because when the
user clicks the text within the <label> element, it toggles the radio
button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the
<input> element to bind them together.
The <select> Element

The <select> element defines a drop-down list:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> element

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.

Example

To define a pre-selected option, add the selected attribute to the option:

<option value="fiat" selected>Fiat</option>
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

The <button> Element

The <button> element defines a clickable button:

Example
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>

This is how the HTML code above will be displayed in a browser:

Click Me!
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
The <datalist> Element

The <datalist> element specifies a list of pre-defined options for an

<input> element.

Users will see a drop-down list of the pre-defined options as they input
data.

The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
The <output> Element
The <output> element represents the result of a calculation (like one
performed by a script).
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"

oninput="x.value=parseInt(a.value)+parseInt(b.value)">

<input type="range" id="a" name="a" value="50">

100 +

<input type="number" id="b" name="b" value="50">

<output name="x" for="a b"></output>

<br><br>

<input type="submit">

</form>
HTML 5 form attributes

The Action Attribute

The action attribute defines the action to be performed when the form is
submitted.

Usually, the form data is sent to a file on the server when the user clicks on
the submit button.

In the example below, the form data is sent to a file called

"action_page.php". This file contains a server-side script that handles the
form data:
Example
On submit, send form data to "action_page.php":
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The Target Attribute

The target attribute specifies where to display the response that is received
after submitting the form.

The target attribute can have one of the following values:

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

Notes on GET:

● Appends the form data to the URL, in name/value pairs

● NEVER use GET to send sensitive data! (the submitted form data is
visible in the URL!)
● The length of a URL is limited (2048 characters)
● Useful for form submissions where a user wants to bookmark the result
● GET is good for non-secure data, like query strings in Google

Notes on POST:

● Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)
● POST has no size limitations, and can be used to send large amounts of
data.
● Form submissions with POST cannot be bookmarked

Tip: Always use POST if the form data contains sensitive or personal
information!
The Autocomplete Attribute

The autocomplete attribute specifies whether a form should have

autocomplete on or off.

When autocomplete is on, the browser automatically complete values

based on values that the user has entered before.

Example

A form with autocomplete on:

<form action="/action_page.php" autocomplete="on">

The Novalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be

validated when submitted.

Example
A form with a novalidate attribute:
<form action="/action_page.php" novalidate>
The Method Attribute

The method attribute specifies the HTTP method to be used when

submitting the form data.

The form-data can be sent as URL variables (with method="get") or as

HTTP post transaction (with method="post").

The default HTTP method when submitting form data is GET.

Example
This example uses the GET method when submitting the form data:
<form action="/action_page.php" method="get">
Example
This example uses the POST method when submitting the form data:
<form action="/action_page.php" method="post">