Module – 1 (WWW, HTML)

Introduction to the Internet & WWW: Evolution of Internet & World Wide Web- Web
Basics, URI’s & URL-MIME.
Introduction to HTML5: Structuring & editing an HTML5 document, Fundamentals of
HTML - Headings-Hyper Links- Images - Special Characters & Horizontal Rules-Lists-
Tables -Forms - Internal Linking- Meta Elements-HTML5 Form input types -Input and
Data List Elements and Autocomplete attribute- Page Structure Elements -Multimedia-
HTML5 Audio & video elements.

Internet

 Internet is a world-wide global system of interconnected computer networks.

 Internet uses the standard Internet Protocol (TCP/IP).
 Every computer in internet is identified by a unique IP address.
 IP Address is a unique set of numbers (such as [Link]) which identifies a computer location.
 A special computer DNS (Domain Name Server) is used to give name to the IP Address so that user
can locate a computer by a name.
 Internet is accessible to every user all over the world.

Evolution of Internet
 The concept of Internet was originated in 1969
 The origin of Internet devised from the concept of Advanced Research Project Agency Network
(ARPANET).
 ARPANET was developed by United States Department of Defense.
 Basic purpose of ARPANET was to provide communication among the various bodies of
government.
 In 1972, the ARPANET spread over the globe with 23 nodes located at different countries and thus
became known as Internet.
 By the time, with invention of new technologies such as TCP/IP protocols, DNS, WWW, browsers,
scripting languages etc. Internet provided a medium to publish and access information over the web.
World Wide

 The World Wide Web (WWW), often called the Web, is a system of interconnected
webpages and information that you can access using the Internet. 
 It was created to help people share and find information easily, using links that connect
different pages together.
 The World Wide Web allows computer users to execute web-based applications and to locate
and view multimedia-based documents on almost any subject over the Internet.
 The Web allows us to browse websites, watch videos, shop online, and connect with others around the
world through our computers and phones.
 All public websites or web pages that people may access on their local computers and other devices
through the internet are collectively known as the World Wide Web or W3.

Evolution of www
 It is a project created, by Tim Berner Lee in 1989, for researchers to work together effectively at
CERN.
 It is an organization, named the World Wide Web Consortium (W3C), which was developed for
further development of the web.
  World Wide Web(WWW) Evolved so much from web 1.0 to web 4.0 (Future of WWW) as follows:

 Web 1.0 (1990–2000) Introduced static websites, while Web 2.0 (2000–2010) brought interactive
and social platforms.
 Web 3.0 (2010–2020) focused on the semantic web, enabling machines to understand data and offer
personalized experiences.
 Looking ahead, Web 4.0 (2020–2030) is expected to be a fully intelligent web ecosystem powered
by AI and integrated web operating systems.

Key Parts of the Web

The Web has three main building blocks that make it work:

1. HTTP (Hypertext Transfer Protocol): This is the set of rules that lets your browser and the server
talk to each other to send and receive webpages.
2. HTML (Hypertext Markup Language): A special type of computer language called a markup
language designed to specify the content and structure of web pages (also called documents) in a
portable manner. HTML5, now under development, is the emerging version of HTML. 
3. The URL (Uniform Resource Locator) specifies the address (i.e., location) of the web
page displayed in the browser window. Each web page on the Internet is associated with a
unique URL. URLs usually begin with [Link]



 
4. URI (Uniform Resource Identifier)
Similar to URL, URI (Uniform Resource Identifier) is also a string of characters that identifies a
resource on the web either by using location, name or both. It allows uniform identification of the
resources. A URI is additionally grouped as a locator, a name or both which suggests it can describe
a URL, URN or both. The term identifier within the URI refers to the prominence of the resources,
despite the technique used.

5. Multipurpose Internet Mail Extension (MIME) Protocol

MIME (Multipurpose Internet Mail Extensions) is a standard designed to extend the format of
email messages, allowing them to include more than just plain text.

It enables the transmission of multimedia content such as images, audio, video and attachments, as
well as other types of content, across email systems that traditionally only supported plain ASCII
text.

MIME allows email messages to carry diverse types of data by encoding them into a format that
can safely travel over protocols like SMTP (Simple Mail Transfer Protocol) without data loss or
corruption.
It also provides metadata to help the receiving client identify and process the content correctly
 Encoding: The message content is converted into a 7-bit ASCII format for safe transmission.
Transmission: The encoded message travels through the email system using SMTP.
Decoding: The receiving client decodes the message back into its original format.
Interpretation: The recipient’s email client reads the MIME headers to correctly display
content and attachments.

Introduction to HTML5

HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming
language, but rather a markup language

HTML5 introduces a number of new elements and attributes that can help you in building modern websites.
Here is a set of some of the most prominent features introduced in HTML5.

New Semantic Elements − These are like <header>, <footer>, and <section>.

Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for
<input> tag.

Persistent Local Storage − To achieve without resorting to third-party plugins.

Web Socket − A next-generation bidirectional communication technology for web applications.

Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers
and they are called Server-Sent Events (SSE).

Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.

Audio & Video − You can embed audio or video on your webpages without resorting to third-party
plugins.

Geolocation − Now visitors can choose to share their physical location with your web application.
HTML Editors
An HTML editor is a software tool used to create and edit HTML code efficiently, often providing
features like syntax highlighting, auto-completion, and error detection.

There are two main types of HTML editors:

1. Text-Based Editors: It Allow direct coding with features like syntax highlighting and code
completion for full control over the webpage structure. Example - Sublime Text, Visual
Studio Code, etc.
2. WYSIWYG (What You See Is What You Get) Editors: It Offer a graphical interface to
design web pages visually, automatically generating the corresponding HTML code.
Example - Adobe Dreamweaver, etc.
HTML Basic Document and Structure
Every HTML document begins with a document type declaration, setting the foundation for the
webpage.
Example HTML5:

OUTPUT
Comments
They are not displayed in the browser but can be viewed in the source code.
1. Single-Line Comments
Single-line comments are written using the <!-- comment --> syntax. They are useful for adding
brief notes or explanations.
<!-- This is a single-line comment -->

2. Multi-Line Comments
Multi-line comments span multiple lines and use the same syntax as single-line comments. They
are helpful for adding detailed explanations or temporarily disabling sections of code.
<!--
This is a multi-line comment
It spans multiple lines
-->
3. Inline Comments
Inline comments can be added within a line of code to comment out specific parts.
<p>This <!-- is an inline comment --> is a paragraph.</p>
HTML Headings
The HTML heading tags are used to create headings for the content of a webpage. These tags are
typically placed inside the body tag. HTML offers six heading tags, from <h1> to <h6>, each
displaying the heading in a different font size.
Syntax:

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

CODE

OUTPUT
HTML Links Hyperlinks
HTML Links, also known as Hyperlinks, are used to connect one web page to another, allowing users to
navigate easily between different pages, websites, or sections within the same page.

 The <a> (anchor) tag creates hyperlinks, using the href attribute to specify the destination URL.
 It can link text, images, or buttons for navigation.

 In HTML5, hyperlinks are created using the <a> (anchor) tag. They allow users to navigate to:

Another webpage

A section within the same page

An email address

A downloadable file
Link to another Website
Open Link in a New Tab

<a href="[Link] target="_blank">Open in New Tab</a>

target="_blank" opens the link in a new browser tab/window.

Link to a Section in the Same Page

<a href="#section2">Go to Section 2</a>

<h2 id="section2">Section 2</h2>

<p>This is section 2 content.</p>

Email Link

<a href="[Link] Email</a>

Download a File

<a href="files/[Link]" download>Download PDF</a>

Additional Attributes

 title: Shows extra info when hovering over the link.

 rel: Defines the relationship between the current document and the linked one (e.g., rel="noopener" for
security when using _blank).

Example:

<a href="[Link] target="_blank" rel="noopener" title="Example Website">

Visit Example

</a>

HTML IMAGE

 The HTML <img> tag is used to embed an image in a web page.

 Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.

 The <img> tag is empty, it contains attributes only, and does not have a closing tag.

 The <img> tag has two required attributes:

src - Specifies the path to the image

alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">
 EXAMPLE

<img src="img_chania.jpg" alt="Flowers in Chania">

Image Size - Width and Height

 You can use the style attribute to specify the width and height of an image.

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

IMAGE MAP

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The
areas are defined with one or more <area> tags.
OUTPUT

SPECIAL CHARACTERS AND HORIZONTAL RULES

 When marking up text, certain characters or symbols may be difficult to embed

directly into an HTML5 document.

 Some keyboards do not provide these symbols (such as ©), or their presence in the
markup may cause syntax errors (as with <). For example, the markup
<p>if x < 10 then increment x by 1</p>

results in a syntax error because it uses the less-than character (<), which is reserved for start
tags and end tags such as <p> and </p>.
 HTML5 provides character entity references (in the form &code;) for representing
special characters (below figure). We could correct the previous line by writing
<p>if x &lt10 then increment x by 1</p>
Figure: Some common HTML character entity references
LISTS
HTML lists are group or collection of items. These items can be both organized and unorganized
depending on the requirement.
They help in organizing, structuring, and presenting information to make it more user-friendly,
readable, and accessible. Sample lists are shown below. −

Unordered lists
Unordered lists display lists of items that are not in a specific order. The unordered lists are marked with
bullet points.
To create an unordered list, the <ul> tag is used along with the <li> tag. Here, the <li> tag specifies the
list items.
EXAMPLE
Ordered Lists
Ordered lists are lists of items that are in a specific order. The ordered lists are marked with numbers by
default; you can change the numbers into alphabets, roman numbers, etc. by using the type attribute or
the CSS list-style-type property.
To create an ordered list, the <ol> tag is used along with the <li> tag, where <li> specifies the list items.
Definition Lists
Definition lists are lists of items with their corresponding descriptions.
The definition lists are created by using the <dl>, <dt>, and <dd> tags. Where the <dl> tag specifies
the "definition list", the <dt> tag specifies the "definition term", and the <dd> tag specifies
the "definition description".

Nested Lists
A list created within another list is known as a nested list. HTML also allows nesting of lists within one
another to generate complex document structures.
Grouping Lists Inside <div> Tag
To enhance styling and layout, lists are often wrapped inside the <div> elements. This grouping aids in
applying consistent styles and creating visually appealing list structures.

Styling Lists
Lists can be styled using CSS to enhance visual presentation. Custom styles can be applied to list items,
creating unique and visually appealing designs. For this, we use the <style> tag, which is a way of
specifying internal CSS.
HTML Table

 HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.
 We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.
 In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data
is defined by <td> tags.
 HTML tables are used to manage the layout of the page e.g. header section, navigation bar,
body content, footer section etc. But it is recommended to use div tag over table to manage
the layout of the page

HTML Table Tags

<!DOCTYPE html>

<html>

<body>

<table >

<tr>

<th >Name</th>

<th >Age</th>

<th >Place</th>

</tr>

<tr>

<td>Anu</td>

<td>20</td>

<td>Kattoor</td>

</tr>

<tr>

<td>Binu</td>

<td>30</td>

<td>New delhi</td>

</tr>

<tr>

<td>Munna</td>

<td>15</td>

<td>Mumbai</td>

</tr>

</table>

</body>

</html>
  We can specify border for html tables either using border attribute of table in html or using
css .
 There are 2 attributes called cellpadding and cellspacing
 Cellpadding basically defines the space present between a table cell's border and the
content present in it.
 Cellspacing basically defines the space present between individual adjacent cells.
 One can create it using the tag of HTML <table>, but it sets the type attribute to cellpadding.

<!DOCTYPE html>

<html>

<body>

<table border="15" cellpadding="15" cellspacing="15"align="center">

<tr>

<th >Name</th>

<th >Age</th>

<th >Place</th>

</tr>

<tr>

<td>Anu</td>

<td>20</td>

<td>Kattoor</td>

</tr>

<tr>

<td>Binu</td>
<td>30</td>

<td>New delhi</td>

</tr>

<tr>

<td>Munna</td>

<td>15</td>

<td>Mumbai</td>

</tr>

</table>

</body>

</html>

HTML Table Colspan & Rowspan

 Table cells can be merged using the colspan and rowspan attributes.

 You can use also colspan attributes if you want to merge two or more columns into single
columns.

 Similar way you can use rowspan if you want to merge two or more rows.

Table background

 bgcolor attribute- you can set background color for whole table or just for one cell

 Background attribute: you can set background image for whole table or just for one cell.

<table border="3" bordercolor="green" bgcolor="yellow" >

<table border="3" bordercolor="green" background="[Link]" >
<!doctype html>

<html>

<body>

<table border="3" width=”400” height=”150” bordercolor="green" bgcolor="yellow">

<tr>

<th>column1</th>

<th>column2</th>

<th>column3</th>

</tr>

<tr>

<td rowspan="2">Row1 cell1</td>

<td>row1 cell2</td>

<td>row1 cell3</td>

</tr>

<tr>

<td>row2 cell2</td>

<td>row2 cell 3</td>

</tr>

<tr>

<td colspan="3">row 3 cell1</td>

</tr>

</table>
</body></html>

 A caption can be added to a table using the <caption> element

 The <thead> tag is used to group header content in an HTML table.

 The <thead> element is used in conjunction with the <tbody> and <tfoot>
elements to specify each part of a table (header, body, footer).
 Browsers can use these elements to enable scrolling of the table body independently
of the header and footer.
 Also, when printing a large table that spans multiple pages, these elements can
enable the table header and footer to be printed at the top and bottom of each page.
 The <thead> element must have one or more <tr> tags inside.
 The <thead> tag must be used in the following context: As a child of a <table>
element, after any <caption> and <colgroup> elements, and before any <tbody>,
<tfoot>,
and <tr> elements.

EXAMPLE

<!doctype>

<html>

<body>

<table border="2" bordercolor="green" bgcolor="yellow">

<caption>student details</caption>

<thead>

<tr>

<td colspan="4"> this is the head of the table</td>

</tr>

</thead>
<tfoot>

<tr>

<td colspan="4">this is the foot of the table</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>alice</td>

<td>bob</td>

<td>tom</td><td>rich</td>

</tr>

</tbody>

</table>

</body>

</html>
HTML Form
 An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc.
 An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc. .

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button
</form>

[Link] Attribute & Description

1
action
Backend script ready to process your passed data.

2
method
Method to be used to upload data. The most frequently used are GET and POST methods.

3
target
Specify the target window or frame where the result of the script will be displayed. It takes
values like _blank, _self, _parent etc.

4
enctype
You can use the enctype attribute to specify how the browser encodes the data before it sends
it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms use in
simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of files
like image, word file etc.
 HTML FORM CONTROLS

There are different types of form controls that you can use to collect data using HTML

 Text input controls

 Checkbox controls
 Radio box controls
 Select box controls
 File select boxes
 Hidden controls
 Clickable button
 Submit and reset button

Text Input Controls

There are three types of text input used on forms −

 Single-line text input controls − This control is used for items that require only one line of
user input, such as search boxes or names. They are created using HTML <input> tag.
 Password input controls − This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTMl <input> tag.
 Multi-line text input controls − This is used when the user is required to give details that
may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or
names. They are created using HTML <input> tag.

<form >

First name: <input type = "text" name = "first_name" />

<br>

Last name: <input type = "text" name = "last_name" />

</form>
Attributes for <input> tag

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They
are also created using HTML <input>tag but type attribute is set to password.

Password: <input type = "password" name = "password" />

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.

<form>
<textarea rows = "5" cols = "50" name =
"description"> Enter description here...
</textarea>
</form>
 Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox..

<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.

<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
 Select Box Control
A select box, also called drop down box which provides option to list down various options
in the form of drop down list, from where a user can select one or more options.

<form>
<select name = "dropdown">
<option value = "Maths" >Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload
box, also known as a file select box. This is also created using the <input> element but type
attribute is set to file.

<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>

Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input>tag by setting its type attribute to button. The type attribute can take the
following values –
 [Link] Type & Description

1
submit
This creates a button that automatically submits a form.

2
reset
This creates a button that automatically resets form controls to their initial values.

3
button
This creates a button that is used to trigger a client-side script when the user clicks
that button.

4
image
This creates a clickable button but we can use an image as background of the
button.

<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/[Link]" />
</form>

Hidden Form Controls

Hidden form controls are used to hide data inside the page which later on can be pushed to the
server. This control hides inside the code and does not appear on the actual page. For example,
following hidden form is being used to keep current page number. When a user will click next
page then the value of hidden control will be sent to the web server and there it will decide
which page will be displayed next based on the passed current page.

<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
 Difference between GET and POST

GET POST
BACK button/Reload Harmless Data will be re-submitted (the
browser should alert the user
that the data are about to be
re-submitted)
Bookmarked Can be bookmarked Cannot be bookmarked
Cached Can be cached Not cached
Encoding type application/x-www-form- application/x-www-form-
urlencoded urlencoded or multipart/form-
data. Use multipart encoding
for binary data
History Parameters remain in browser Parameters are not saved in
history browser history
Restrictions on data length Yes, when sending data, the No restrictions
GET method adds the data to the
URL; and the length of a URL is
limited (maximum URL
length is 2048 characters)
Restrictions on data type Only ASCII characters allowed No restrictions. Binary data is
also allowed
Security GET is less secure compared to
POST because data sent is part
of the URL

HTML FRAMES

 HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document.
 A collection of frames in the browser window is known as a frameset.
 The window is divided into frames in a similar way the tables are organized: into rows and
columns.
 Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by
<frame> tag and it defines which HTML document shall open into the frame.
Note − The <frame> tag deprecated in HTML5. Do not use this element.
<!DOCTYPE html>
<html>
<frameset rows="400%,600%">
<frame src="[Link]">
<frameset cols="300%, 300%">
<frame src="[Link]" align="center">
<frame src="[Link]">
</frameset>
</frameset>
</html>

Attributes: The list of frameset attributes are given below:

 META ELEMENTS

 The <meta> tag defines metadata about an HTML document. Metadata is data (information) about
data.
 <meta> tags always go inside the <head> element, and are typically used to specify character set,
page description, keywords, author of the document, and viewport settings.
 Metadata will not be displayed on the page, but is machine parsable.
 Metadata is used by browsers (how to display content or reload page), search engines (keywords),
and other web services.
 There is a method to let web designers take control over the viewport (the user's visible area of a web
page), through the <meta> tag (See "Setting The Viewport" example below).

EXAMPLE
 .
DATALIST ELEMENT

 The <datalist> tag specifies a list of pre-defined options for an <input> element.

 The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users
will see a drop-down list of pre-defined options as they input data.

 The <datalist> element's id attribute must be equal to the <input> element's list attribute (this
binds them together).

OUTPUT
AUTOCOMPLETE

 The autocomplete attribute specifies whether a form or an input field should have
autocomplete on or off.

 Autocomplete allows the browser to predict the value. When a user starts to type in a
field, the browser should display options to fill in the field, based on earlier typed values.

 Note: The autocomplete attribute works with the following <input> types: text, search,
url, tel, email, password, datepickers, range, and color.

FORM EXAMPLE
 INPUT EXAMPLE

PAGE-STRUCTURE ELEMENTS
HTML5 introduces several page structure elements that meaningfully identify areas of the page
as headers, footers, navigation areas, asides, figures and more
<section>

The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a
heading."

Examples of where a <section> element can be used:

 Chapters
 Introduction
 News items
 Contact information

A web page could normally be split into sections for introduction, content, and contact information.

<article>

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from the rest
of the web site.

Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles
<header>

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information
<footer>

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents

<nav>
The <nav> element defines a set of navigation links.
<aside>

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

<figure> &<figcaption>

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as
the first or as the last child of a <figure> element.

The <img> element defines the actual image/illustration.

Multimedia Tags in HTML5: Video, Audio

 HTML5 has revolutionized the way we consume multimedia content on the web.

 With HTML5, web developers can create immersive and interactive multimedia experiences
that rival those of traditional desktop applications.
 In HTML5, multimedia tags are used to embed audio, video, and other types of multimedia
content into web pages.

<video>
 The HTML <video> element is used to show a video on a web page.
Attributes of Video tag:

src: specifies the URL of the video file

controls: displays the default video player controls

autoplay: automatically starts playing the video when the page loads

loop: continuously repeats the video file

preload: specifies whether the video should be preloaded or not

poster: specifies an image to be displayed before the video starts playing

widthand height: specifies the dimensions of the video display area in pixels

 Add muted after autoplay to let your video start playing automatically (but muted):

<audio>

 One of the most important multimedia tags in HTML5 is the <audio>tag.

 This tag is used to embed audio content into web pages.

 It supports several audio formats, such as MP3, OGG, and WAV.

<audio src="audiofile.mp3" controls>

Your browser does not support the audio element.

</audio>
Attributes of Audio tag:
src: specifies the URL of the audio file

controls: displays the default audio player controls

autoplay: automatically starts playing the audio when the page loads

loop: continuously repeats the audio file

preload: specifies whether the audio should be preloaded or not