Scribd
Upload
4 views

HTML5

HTML5 is the latest version of Hyper Text Markup Language, enhancing web page design with new features like multimedia support, semantic elements, and APIs. It introduces new tags such as <article>, <header>, <footer>, and <video>, improving user experience and functionality. While HTML5 is widely supported by modern browsers, it may require longer code and is not fully compatible with older browsers.

Uploaded by

isha chatterjee
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML5

HTML5 is the latest version of Hyper Text Markup Language, enhancing web page design with new features like multimedia support, semantic elements, and APIs. It introduces new tags such as <article>, <header>, <footer>, and <video>, improving user experience and functionality. While HTML5 is widely supported by modern browsers, it may require longer code and is not fully compatible with older browsers.

Uploaded by

isha chatterjee
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML5

HTML5 | Introduction

Introduction: HTML stands for Hyper Text Markup Language. It is used to


design web pages using a markup language. HTML is an abbreviation of
Hypertext and Markup language. Hypertext defines the link between the web
pages. 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. It has improved the markup available for documents and
has introduced application programming interfaces (API) and Document
Object Model (DOM).

Features:
• It has introduced new multimedia features which supports both audio and
video controls by using <audio> and <video> tags.
• There are new graphics elements including vector graphics and tags.
• Enrich semantic content by including <header> <footer>, <article>,
<section> and <figure> are added.
• Drag and Drop- The user can grab an object and drag it further dropping it
to a new location.
• Geo-location services- It helps to locate the geographical location of a
client.
• Web storage facility which provides web application methods to store data
on the web browser.
• Uses SQL database to store data offline.
• Allows drawing various shapes like triangle, rectangle, circle, etc.
• Capable of handling incorrect syntax.
• Easy DOCTYPE declaration i.e., <!doctype html>
• Easy character encoding i.e., <meta charset=”UTF-8″>

New Added Elements in HTML 5:

• <article>: The <article> tag is used to represent an article. More


specifically, the content within the <article> tag is independent from the
other content of the site (even though it can be related).

• <aside>: The <aside> tag is used to describe the main object of the web
page in a shorter way like a highlighter. It basically identifies the content
that is related to the primary content of the web page but does not constitute
the main intent of the primary page. The <aside> tag contains mainly
author information, links, related content and so on.

• <figcaption>: The <figcaption> tag in HTML is used to set a caption to the


figure element in a document.

• <figure>: The <figure> tag in HTML is used to add self-contained content


like illustrations, diagrams, photos or codes listing in a document. It is
related to main flow, but it can be used in any position of a document and
the figure goes with the flow of the document and if it is removed it should
not affect the flow of the document.

• <header>: It contains the section heading as well as other content, such as


a navigation links, table of contents, etc.

• <footer>: The <footer> tag in HTML is used to define a footer of HTML


document. This section contains the footer information (author information,
copyright information, carriers etc.). The footer tag is used within body tag.
The <footer> tag is new in the HTML 5. The footer elements require a start
tag as well as an end tag.

• <main>: Delineates the main content of the body of a document or web


app.

• <mark>: The <mark> tag in HTML is used to define the marked text. It is
used to highlight the part of the text in the paragraph.

• <nav>: The <nav> tag is used to declaring the navigational section in


HTML documents. Websites typically have sections dedicated to
navigational links, which enables user to navigate the site. These links can
be placed inside a nav tag.

• <section>: It demarcates a thematic grouping of content.

• <details>: The <details> tag is used for the content/information which is


initially hidden but could be displayed if the user wishes to see it. This tag
is used to create interactive widget which user can open or close it. The
content of details tag is visible when open the set attributes.

• <summary>: The <summary> tag in HTML is used to define a summary


for the <details> element. The <summary> element is used along with the
<details> element and provides a summary visible to the user. When the
summary is clicked by the user, the content placed inside the <details>
element becomes visible which was previously hidden. The <summary> tag
was added in HTML 5. The <summary> tag requires both starting and
ending tag.

• <time>: The <time> tag is used to display the human-readable data/time. It


can also be used to encode dates and times in a machine-readable form. The
main advantage for users is that they can offer to add birthday reminders or
scheduled events in their calendars and search engines can produce smarter
search results.

• <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiates


a text from other text that may be formatted in different direction. This tag
is used when a user generated text with an unknown direction.

• <wbr>: The <wbr> tag in HTML stands for word break opportunity and is
used to define the position within the text which is treated as a line break
by the browser. It is mostly used when the used word is too long and there
are chances that the browser may break lines at the wrong place for fitting
the text.

• <datalist>: The <datalist> tag is used to provide autocomplete feature in


the HTML files. It can be used with input tag, so that users can easily fill
the data in the forms using select the data.

• <keygen>: The <keygen> tag in HTML is used to specify a key-pair


generator field in a form. The purpose of <keygen> element is to provide a
secure way to authenticate users. When a form is submitted then two keys
are generated, private key and public key. The private key stored locally,
and the public key is sent to the server. The public key is used to generate
client certificate to authenticate user in future.

• <output>: The <output> tag in HTML is used to represent the result of a


calculation performed by the client-side script such as JavaScript.

• <progress>: It is used to represent the progress of a task. It also defines


how much work is done and how much is left to download a task. It is not
used to represent the disk space or relevant query.

• <svg>: It is the Scalable Vector Graphics.


• <canvas>: The <canvas> tag in HTML is used to draw graphics on web
page using JavaScript. It can be used to draw paths, boxes, texts, gradient
and adding images. By default, it does not contain border and text.

• <audio>: It defines the music or audio content.

• <embed>: Defines containers for external applications (usually a video


player).

• <source>: It defines the sources for <video> and <audio>.

• <track>: It defines the tracks for <video> and <audio>.

• <video>: It defines the video content.

Advantages:
• All browsers supported.
• More device friendly.
• Easy to use and implement.
• HTML 5 in 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.
Supported Browsers: It is supported by all modern browsers.
Below examples illustrate the HTML 5 content.
<!DOCTYPE html>
<html>

<head>
<title>HTML 5</title>
<style>
h1 {
font-size:50px;
}
</style>
</head>

<body>
<h1>Welcome to HTML5</h1>
</body>

</html>
HTML | pattern Attribute
This attribute is used to specify the regular expression on which the input
element value is checked. This attribute works with the following input types:
text, password, date, search, email, etc. Use the Global title attribute to
describe the pattern for helping the user.
Syntax:
<input pattern = "regular_exp">

Element: This attribute is associated with <input> element only.


Attribute: This attribute specifies the regular expression.
Supported Browsers: The browser supported by pattern attribute are listed
below:
• Google Chrome 4.0 and above
• Edge 12 and above
• Firefox 4.0 and above
• Opera 12.1 and above
• Safari 5 and above

HTML placeholder Attribute


HTML placeholder attribute specifies a short hint that describes the expected
value of an input field/text area. The short hint is displayed in the field before
the user enters a value.

Syntax:
<element placeholder="">

HTML placeholder Attribute Examples


Example 1: HTML <input> placeholder attribute specifies a short hint or
example text displayed in an input field before the user enters a value. It helps
users understand the expected input format or content.

HTML readonly Attribute


The HTML readonly attribute, when applied to input fields or text areas,
prevents users from editing the content, allowing only for viewing purposes.
Syntax
<input readonly>

Supported Tags
This attribute is used with two elements which are listed below:

Element Description

<input> Used with the readonly attribute for read-only input fields.

<textarea> Utilized with the readonly attribute for read-only text areas.

HTML autofocus Attribute


The HTML autofocus attribute is a powerful tool that enhances user
experience by automatically setting the focus to a specific element when a
webpage loads. This attribute is boolean, meaning it can either be present or
absent.
Syntax:
<elementName autofocus>

Supported Tags

Element Purpose

Button autofocus Automatically focuses the button when the page


Attribute loads.

Input autofocus Automatically focuses the input field when the page
Attribute loads.

Select autofocus Automatically focuses the select dropdown when the


Element Purpose

Attribute page loads.

Textarea autofocus Automatically focuses the text area when the page
Attribute loads.

Examples of HTML autofocus Attribute


Example: This example uses the autofocus attribute to create the focus on the
first name while loading the page for the first time.

<!DOCTYPE html>
<html>
<head>
<title>HTML autofocus Attribute </title>
</head>

<body>
<h2>HTML autofocus Attribute</h2>
<form>
<label
>First Name:
<input
type="text"
autofocus
placeholder="Enter Name"
/>
</label>
</form>
</body>
</html>

HTML | <input type=”number”>


The HTML <input type=”number”> is used to specify an input field for
entering a number.

Syntax:
<input type="number">
Example:
<!DOCTYPE html>
<html>
<head>
<title>
HTML input type number
</title>
</head>

<body style="text-align:center;">

<h1 style="color:green;">
GeeksForGeeks
</h1>

<h2>HTML &lt;Input Type="Number"&gt;</h2>

<input type="number" id="myNumber"


value="10">
</body>
</html>

HTML <input type=”password”>


HTML <input type=”password”> is used to specify the password field of
the input tag. Password should be served over the HTTPS pages because it
includes the sensitive information of the user.

Syntax:
<input type="password">

HTML <input type=”radio”>


HTML <input type=”radio”> creates a radio button input field allowing
users to select one option from multiple choices. Only one radio button in a
group can be selected at a time.
The <input type="radio"> element may have additional attributes like name to
group-related radio buttons and value to assign a specific value to the selected
option.

Note: The “value” attribute in radio buttons assigns a distinct identifier for
each option. While not visible to users, this value is sent to the server upon
submission, helping identify the selected radio button.
HTML <input type=”radio”> Syntax:
<input type="radio">

HTML | <input type=”range”>


The HTML <input type=”range”> is used to define control for a number
entered by the user. It can set restrictions on unimportant number or value
which will be entered by the user. It has a Default range value from 0 to 100.

Syntax:
<input type="range">

Supported Browsers:
• Google Chrome 4.0 and above
• Firefox 23.0 and above
• Edge 12.0 and above
• Opera 11.0 and above
• Internet Explorer 10 and above
• Apple Safari 3.1 and above

Example:
<!DOCTYPE html>
<html>

<head>
<title>
HTML Input Type range
</title>
</head>
<style>
#Geek_p {
font-size: 30px;
color: green;
}
</style>

<body style="text-align:center;">

<h1 style="color:green;">
GeeksForGeeks
</h1>

<h2>HTML &lt;Input Type="range"&gt;


</h2>
<input type="range"
id="Geek_Range"
value="90">
</body>

</html>

HTML | <input type=”time”>


The HTML <input type=”time”> is used to specify the entering time control
field.

Syntax:
<input type="time">

Example:
<!DOCTYPE html>
<html>

<head>
<title>
HTML input type time
</title>
</head>

<body style="text-align:center;">

<h1 style="color:green;">
GeeksForGeeks
</h1>

<h2>HTML <input type="time"></h2>

<form action="#">
Input Time: <input type="time" name="time">

<input type="submit" value="Submit">


</form>
</body>

</html>
HTML | <input type=”week”>
The HTML <input type=”week”> is used to define a week and a year
control field.
Syntax:
<input type="week">
Example:

<!DOCTYPE html>
<html>

<head>
<title>
HTML Input Type week
</title>
</head>
<style>
#Geek_p {
font-size: 30px;
color: green;
}
</style>

<body style="text-align:center;">

<h1 style="color:green;">
GeeksForGeeks
</h1>

<h2>HTML &lt;Input Type="week"&gt;


</h2>
<form>
<input type="week">
<br>
<br>

</form>
</body>

</html>

HTML <input type=”date”>


HTML <input type=”date”> element provides a date picker interface for
selecting dates. It allows users to input dates using a calendar widget, ensuring
standardized date input across different browsers and devices.
Syntax:
<input type="date">

HTML <input type=”date”> Examples

<!DOCTYPE html>
<html>

<head>
<title>HTML Input type = "Date" </title>
</head>

<body>
<h2>HTML &lt;input type="date"&gt;</h2>

<!-- Corrected value format -->


<input type="date"
id="test"
value="2019-07-02">

</body>

</html>

HTML <input type=”email”>


The HTML <input type=”email”> is used to define a field for email address.
automatically validating input for proper email format. Adding “multiple”
allows multiple addresses.

Syntax:
<input type="email">

Example: In this example we demonstrate the <input type=”email”> element


within a form, allowing input of an email address and automatically validating
its format.

<!DOCTYPE html>
<html>

<head>
<title>
HTML input type email
</title>
</head>
<body style="text-align:center;">
<form>
Email:
<input
type="email"
value="[email protected]">
</form>
</body>

</html>

HTML- Video Element


The <video> element in HTML
The <video> element is used to enable video playback support within a web
page. It works very similarly to the <img> element as it also requires adding the
path or URL of the video within the src attribute. The HTML supports only
MP4, WebM, and Ogg video formats. The <video> element also supports audio
however, the <audio> element is more suitable for that purpose.

How to embed a video in HTML?

To embed a video inside a web page, we need to set the src attribute inside the
<video> element that specifies the path or URL for video. A web page serves
content to a wide variety of users with various types of browsers. Each browser
supports different video formats (MP4, WebM, and Ogg) as mentioned earlier.
Therefore, we can supply all the formats that HTML supports by including
multiple <source> tag within <video> element. We let the browser decide
which format is more suitable for video playback.

We can also enable the built-in controls for controlling audio and video
playback to the users (if needed) with the help of controls attribute. It provides
an interface that enables users to manage video playback functions such as
volume adjustment, video navigation (forward and backwards) and play or
pause operations.
Setting the Dimension of Video Display Area
To set the dimension of video display area, also known as the viewport, we can
use the height and width attributes of the <video> element. These attributes
define the height and width of the video viewport in pixels.

Note that the video will adjust its aspect ratio (e.g. 4:3 and 16:9) to align with
the specified height and width. Therefore, it is advisable to match the
dimensions of viewport for a better user experience.

The autoplay and looping of video


We can configure the video to play automatically in a loop by using
the autoplay and loop attributes. Remember, a few browsers like Chrome 70.0 do
not support autoplay feature unless the muted attribute is used. Therefore, it is
recommended to use autoplay and muted attributes together.

Using a Thumbnail for the video

We can pass a URL of an image that works as a thumbnail for the video within
the poster attribute of <video> element. It will display the specified image until
the video starts playing.

HTML - Audio Element


The <audio> element in HTML

The <audio> element is used to enable the support of audio file within a web
page. We can include multiple sources of audio, however, the browser will
choose the most appropriate file automatically. Most of the attributes
of <video> element is also compatible with the <audio> element. The most
frequently used attributes of HTML audio element are controls, autoplay, loop,
muted and src.
How to embed an audio in HTML?

Like video, audio player is also embedded inside a web page either by setting
the src attribute or by including <source> tag within the audio element. The src
attribute and source tag specifies the path or URL for audio. The
current HTML5 draft specification does not specify which audio formats
browsers should support in the audio tag. But most commonly used audio
formats are ogg, mp3 and wav. Therefore, it is also possible to supply all these
formats by using multiple <source> tag within <audio> element. We let the
browser decide which format is more suitable for audio playback.

It is necessary to use the controls attribute so that users can manage audio
playback functions such as volume adjustment, forward or backwards
navigation and play or pause operations.

The autoplay and looping of audio


We can also configure the audio to play automatically in a loop by using
the autoplay and loop attributes. Remember, the Chrome browser does not
support autoplay feature unless the muted attribute is used. Therefore, it is
recommended to use autoplay and muted attributes together.

The autoplay is a Boolean attribute that is used to play the audio automatically
once the page is loaded. If loop attribute is present on the <audio> element, the
audio sound will automatically rewind to the beginning once the end of audio is
reached.

HTML - Embed Multimedia


In previous, we have used the <audio> and <video> elements to add music and
videos into the web page. There is another alternative way to add videos, sounds
and images or any other external content to the web site by using a special HTML
tag called <embed>. This tag causes the browser itself to include controls for the
multimedia automatically.

The <embed> Tag Attributes

Following is the list of important attributes which can be used with the <embed>
tag.
width
1
Width of the object in pixels.

height
2
Height of the object in pixels.

title
3
It is used to label the content. The title should describe the content.

src
4
URL of the object to be embedded.

type
5
It indicates the type of input like mp4 and mp3.

Embedding a Video using <embed> Tag

To embed an external video file inside the web page, we can pass the path of video
file into the src attribute of <embed> element. The supported video formats are
MP4, WebM, and Ogg. We don’t need to use the controls attribute as <embed> tag
provides the controls automatically depending on the type of media. The controls
attribute allows users to manage the video playback functions.

Embedding an Audio using <embed> Tag

To add a soundtrack into the webpage, we can pass the path of audio file into
the src attribute by mentioning the type of audio. The supported audio formats
are ogg, mp3 and wav.

HTML Object tag

HTML 4 introduces the <object> element, which offers an all-purpose solution to


generic object inclusion. The <object> element allows HTML authors to specify
everything required by an object for its presentation by a user agent.

Object tag Attributes

Following is the list of object tag attributes −

data
1
The location or path of the resource is passed into data attribute.

type
2
It indicates the type of resource.
height
3
It signifies the height of the resource display area.

width
4
It signifies the width of the resource display area.

form
5 Its value is the id of a form. The form attribute shows which object is associated with
the form.

name
6
It specify a unique name for the object.

usemap
7
Specifies a URL of a client-side image map to be used with the object.

HTML Layout
HTML layouts are the backbone of web pages, providing a structured and
organized presentation of content. They play a crucial role in enhancing the
user experience by making the website easy to navigate.

Understanding HTML Layouts


HTML Layout refers to the structure of a web page, achieved through
elements like <header>, <nav>, <main>, <article>, <section>, <aside>,
and <footer>. These elements help organize content, define the page’s
sections, and enhance accessibility and SEO.

Syntax: <div class = "header"> Content... </div>


<div class = "section"> Content... </div>
<div class = "footer"> Content... </div>

Layout Components
Layouts Descriptions

The part of the front end which is used at


Header the top of the page. <header> tag is used
to add a header section on web pages.
Layouts Descriptions

The navigation bar is the same as the


menu list. It is used to display the content
Navigation bar information using hyperlinks. <nav> tag is
used to add the nav section(nav elements)
in web pages.

It holds additional information or


Index / Sidebar advertisements and is not always
necessary to be added to the page.

The content section is the central part


where content is displayed.<main> tag is
Content Section
used to add the main content of the
webpages.

The footer section contains the contact


information and other query related to web
Footer pages. The footer section is always put on
the bottom of the web pages. The <footer>
tag sets the footer on web pages.

Example: HTML Layout Example


<!DOCTYPE html>
<html>

<head>
<title>Page Layout</title>
<style>
.head1 {
font-size: 40px;
color: #009900;
font-weight: bold;
}

.head2 {
font-size: 17px;
margin-left: 10px;
margin-bottom: 15px;
}

body {
margin: 0 auto;
background-position: center;
background-size: contain;
}

.menu {
position: sticky;
top: 0;
background-color: #009900;
padding: 10px 0px 10px 0px;
color: white;
margin: 0 auto;
overflow: hidden;
}

.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}

.menu-log {
right: auto;
float: right;
}

footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top: 20px;
padding-bottom: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
}

.body_sec {
margin-left: 20px;
}
</style>
</head>

<body>

<!-- Header Section -->


<header>
<div class="head1">
GeeksforGeeks
</div>
<div class="head2">
A computer science portal for geeks
</div>
</header>

<!-- Menu Navigation Bar -->


<nav class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">
NOTIFICATIONS
</a>
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</nav>

<!-- Body section -->


<main class="body_sec">
<section id="Content">
<h3>Content section</h3>
</section>
</main>

<!-- Footer Section -->


<footer>Footer Section</footer>
</body>

</html>

HTML Iframes

An iframe in HTML allows you to embed another HTML document within


your current webpage. It’s like having a mini window that displays content
from an external source. It supports various attributes for specifying
dimensions, borders, scrolling, and more to customize the appearance and
behaviour of the embedded content.

Syntax:
<iframe src="URL" title="description"></iframe>

• The src attribute specifies the URL of the document you want to embed.
• Iframes can include videos, maps, or entire web pages from other sources.
Attributes Value:
It contains a single value URL that specifies the URL of the document that is
embedded in the iframe. There are two types of URL links which are listed
below:

URL Descriptions

Absolute URL It points to another webpage.

It points to other files of the same web


Relative URL
page.

Supported Attributes:
Attributes Description

Specifies a set of extra restrictions on the content that can be


allow
loaded in an <iframe>.

Indicates whether the <iframe> can be displayed in fullscreen


allowfullscreen
mode.

allowpaymentrequest Enables payment requests for content inside the <iframe>.

height Sets the height of the <iframe> element.

width Sets the width of the <iframe> element.

loading Specifies how the content of the <iframe> should be loaded.

scrolling Controls whether or not the <iframe> should have scrollbars.

Specifies the name of the <iframe> for targeting its content or


name
for referencing it in JavaScript.

referrerpolicy Sets the referrer policy for the <iframe> content.


Attributes Description

Specifies an extra set of restrictions for the content in


sandbox
the <iframe>.

src Specifies the URL of the document to embed in the <iframe>.

Specifies the HTML content of the page to display in


srcdoc
the <iframe>.

You might also like