Scribd
Upload
2 views75 pages

Lecture2 - Introduction To HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating static web pages and describes their structure using elements that inform browsers how to display content. It was invented by Tim Berners-Lee in the late 1980s and has undergone several versions, with HTML5 being the latest. HTML is user-friendly, widely supported, and allows for the integration of multimedia, but it has limitations such as creating only static pages and less security features.

Uploaded by

prayuk2022
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
2 views75 pages

Lecture2 - Introduction To HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating static web pages and describes their structure using elements that inform browsers how to display content. It was invented by Tim Berners-Lee in the late 1980s and has undergone several versions, with HTML5 being the latest. HTML is user-friendly, widely supported, and allows for the integration of multimedia, but it has limitations such as creating only static pages and less security features.

Uploaded by

prayuk2022
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/ 75

Hypertext Markup Language (HTML)

Compiled and Presented By: CKS


Email: chandraks35@yahoo.com
HTML stands for Hyper Text Markup Language
With HTML you can create your own Website/Static web pages.
It is the standard markup language for creating Web pages
It describes the structure of a Web page
It consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
<!DOCTYPE>: It defines the document type or it instruct the browser about the version
of HTML.
<html>:This tag informs the browser that it is an HTML document. Text between html
tag describes the web document. It is a container for all other elements of
HTML except <!DOCTYPE>
<head>:It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body
tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears
at the top of the browser window. It must be placed inside the head tag and
should close immediately. (Optional)

Cntd …
<body>: Text between body tag describes the body content of the page that
is visible to the end user. This tag contains the main content of the
HTML document.
<h1>: Text between <h1> tag describes the first level heading of the
webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
 It was invented by Tim Berners Lee in around 1989 and 1990.
 It was based on previous language called SGML which stands for
“Standard General Markup Language”.
 It is not a programming language, it means it doesn’t have the
capability of creating dynamic pages.
 Tim Berners-Lee is known as the father of HTML. The first available
description of HTML was a document called "HTML Tags" proposed
by Tim in late 1991. The latest version of HTML is HTML5
Since the time HTML was invented there are lots of HTML
versions in market, they are:
1. HTML 1.0
2. HTML 2.0
3. HTML 3.2
4. HTML 4.01
5. HTML5

Cntd …
1. HTML 1.0: The first version of HTML was 1.0, which was the
basics version of HTML language, and it was
released in1991.
2. HTML 2.0: This was the next version which was released in
1995, and it was standard language version for
website design. HTML 2.0 was able to support
extra features such as form-based file upload,
form elements such as text box, option button, etc.

Cntd …
3. HTML 3.2: It was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for
form elements. It can also support a web page with complex
mathematical equations. It became an official standard for any browser
till January 1997. Today, it is practically supported by most of the
browsers.
4. HTML 4.01: It was released on December 1999, and it is a very stable
version of HTML language. This version is the current official standard,
and it provides added support for style sheets (CSS) and scripting ability
for various multimedia elements.

Cntd …
5. HTML5 1.: It is the newest version of HyperText Markup language.
The first draft of this version was announced in January 2008. There are
two major organizations one is W3C (World Wide Web Consortium), and
another one is WHATWG (Web Hypertext Application Technology
Working Group) which are involved in the development of HTML 5
version, and still, it is under development.
1) It is a very easy and simple language. It can be easily
understood and modified.
2) It is very easy to make an effective presentation with
HTML because it has a lot of formatting tags.
3) It is a markup language, so it provides a flexible way to
design web pages along with the text.
4) It facilitates programmers to add a link on the web pages (by
html anchor tag), so it enhances the interest of browsing of
the user.

Cntd …
5) It is platform-independent because it can be displayed on
any platform like Windows, Linux, and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and
Sound to the web pages which makes it more attractive and
interactive.
7) HTML is a case-insensitive language, which means we can
use tags either in lower-case or upper-case.
NOTE: It is recommended to write all tags in lower-
case for consistency, readability, etc.
 HTML is easy to learn and use, so anyone can learn it.
 It is free and no need to purchase special software.
 It is simple and widely used.
 It is supported by all browsers.
 It is easy to edit HTML documents.
 It is the most search engine friendly.
 It is lightweight.
 HTML can create only static web pages.
 We have to write a lot of codes to make simple web
pages.
 Security features are less in HTML.
 HTML sometimes shows unpredictable behavior
across browsers.
 Making the structure of HTML documents becomes
tough to understand.
 An HTML file is a text file, so to create an HTML file we
can use any text editors.
 Text editors are the programs which allow editing in a
written text, hence to create a web page we need to write
our code in some text editor.
 There are various types of text editors available which
you can directly download, but for a beginner, the best
text editor is Notepad (Windows) or TextEdit (Mac).

Cntd …
 After learning the basics, you can easily use other
professional text editors which are, Notepad++, Sublime
Text, Vim, etc.
 In our tutorial, we will use Notepad and Sublime text
editor.

Cntd …
Steps (Notepad):
Step 1: Open Notepad (PC) Windows 8 or later: ...
Step 2: Write Some HTML. ...
Step 3: Save the HTML Page. ...
Step 4: View the HTML Page in Your Browser.
Tip: You can use either .htm or .html as file extension.
There is no difference; it is up to you.
HTML tags are like keywords which defines that how
web browser will format and display the content. With
the help of tags, a web browser can distinguish
between an HTML content and a simple content.
HTML tags contain three main parts: opening tag,
content and closing tag. But some HTML tags are
unclosed tags.

Cntd …
 Tags are instructions that are embedded directly into the text of a HTML
document.
 Each HTML tag describes that the browser should do something instead of
simply displaying the text.
 In HTML, the tags begin with (<) and end with (>)
HTML tags can be of two types. They are
1. Paired Tags (Closing, Container)
2. Unpaired Tags(Singular, Stand-alone, Empty, Self Closing Tag)

Cntd …
1. Paired Tags: A tag is said to be a paired tag if the text is placed
between a tag and its companion tag. In paired tags, the first tag is
referred to as Opening Tag and the second tag is referred to
as Closing Tag.
Example: <i>This text is in italics. </i>

Note: Here <i> is called opening tag. and </i> is called closing tag.

Cntd …
2. Unpaired Tags: An unpaired tag does not have a companion tag or closing tag.
Unpaired tags are also known as Singular or Stand-Alone Tags.
Example:
<br> , <hr>, <img>, etc.

These tags does not require any companion tag.


Tags Based on their utility
We can differentiate tags based on the purpose they
used. Basically we have four types:
1. Formatting tags
2. Meta Tags
3. Page Structure tags
4. Control tags
Tags Based on their utility
1. Formatting tags: HTML provides many predefined elements that are
used to change the formatting of text. The formatting can be used to set
the text styles (like – bold, italic, or emphasized, etc.), highlighting the
text, making text superscript and subscript, etc.
All the formatting tags are paired tags.

Cntd …
Tags Based on their utility Some HTML Formatting tags are:
 Bold Tag <b>
 Italic Tag <i>
1. Formatting tags:  Underline Tag <u>
 Strong Tag <strong>
 Small Tag <small>
 Big Tag <big>
 Mark Tag <mark>
 Emphasized Tag <em>
 Deleted Tag <del>
 Inserted Tag <ins>
 Subscripted Tag <sub>
 Superscripted Tag <sup>
Tags Based on their utility
2. Meta Tags: The META elements can be used to describe properties
of the HTML document, such as author, expiry date, a list of keywords,
document author, description of web page, etc.
Information present in meta tag is crucial for the search engines
because that information will be used by search engine to ensure the
content, a user is searching for. This tag is an empty element and so does
not have a closing tag but it carries information within its attributes.
Example: <title> , <Description> , <KEYWORDS>
<title> Meta Tag </title>
Tags Based on their utility
3. Page Structure tags: <head> , <body> etc are part of the page
structure tags. They are part of the basic
html page and does not directly affect the
formatting of text or image.
Tags Based on their utility
4. Control Tags: Form tags, Script tags, Radio buttons etc are part
of the control tags. These tags are used to manage content or mange
external scripts or libraries (Jquery, Bootstrap).
All form tags like input text box, dropdown list, radio buttons etc are
used for interaction with user. These tags can be formatted by using
style properties.
1. HTML Formatting Tags:
HTML Formatting is a process of formatting text for better look and feel.
HTML provides us ability to format text without using CSS. There are
many formatting tags in HTML. These tags are used to make text bold,
italicized, or underlined. There are almost 14 options available that how
text appears in HTML and XHTML.
Some of the HTML formatting tags are: <B>, <I>, <U>, <BIG>, <SMALL>, etc.

Cntd …
2. HTML Heading Tags:
There are six different HTML headings which are defined with the <h1> to <h6> tags,
from highest level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most
important heading and h6 is used for least important. Example:
1.<h1>Heading no. 1</h1>
2.<h2>Heading no. 2</h2>
3.<h3>Heading no. 3</h3>
4.<h4>Heading no. 4</h4>
5.<h5>Heading no. 5</h5>
6.<h6>Heading no. 6</h6>

Cntd …
3. HTML Paragraph Tags:
HTML paragraph or HTML p tag is used to define a paragraph in a
webpage. Example:
1.<p>This is first paragraph.</p>
2.<p>This is second paragraph.</p>
3.<p>This is third paragraph.</p>

Cntd …
4. HTML Phrase Tags:
The HTML phrase tags are special purpose tags, which defines the
structural meaning of a block of text or semantics of text. Example:
• Abbreviation tag : <abbr>,
• Address tag: <address>,
• Marked tag: <mark>, etc.
<p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is used
to create web pages. </p>

Cntd …
5. HTML Anchor Tags:
The HTML anchor tag defines a hyperlink that links one page to another page. It
can create hyperlink to other web page as well as files, location, or any URL. The
"href" attribute is the most important attribute of the HTML a tag. and which links to
destination page or URL. Example:

<a href=“abc.html">Click for Second Page</a>

Cntd …
6. HTML Image Tags:
HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that contains attributes only, closing tags are not used in HTML image
element.
Attributes of HTML img tag: src, alt, width, height.
Example:

<img src="animal.jpg" height="180" width="300" alt="animal image">

Cntd …
7. HTML Table Tags:
HTML table tag is used to display data in tabular form (row * column). 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 .

Cntd …
7. HTML Table Tags:
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
Etc..

Cntd …
7. HTML Table Tags:
HTML Table Example: Some of the
<table> Attributes of HTML
<tr> Table Tags are:
<th>Month</th>
<th>Savings</th> bgcolor, border,
</tr> cellpadding,
<tr> cellspacing, etc.
<td>January</td>
<td>$100</td>
</tr>
</table>

Cntd …
Some of the Attributes of HTML Table Tags are:
1. bgcolor: To apply color in background
2. border: To apply border in table size.
3. bordercolor: To apply border color.
4. cellpadding: To set distance between cell border and cell contenet
5. cellspacing: To set spacing between cells.
6. background: To apply image in background
7. height: Height of the table
8. width: Width of the table
9. align: To set alignment of table
10. caption: defines table caption

Cntd …
The special Attributes of HTML Table Tags are:
1. rowspan: To set cell width equal to many rows.
2. colspan: To set cell width equal to many columns
Output
Example:
<tr>
<th rowspan=“2”>Name</th>
<th colspan=“5”>Subject</th>
<th rowspan=“2”>Total</th>
</tr>

Cntd …
8. HTML List Tags:
HTML Lists are used to specify lists of information. All lists may contain
one or more list elements. There are three different types of HTML lists:
1.Ordered List or Numbered List (ol):
2.Unordered List or Bulleted List (ul):
3.Description List or Definition List (dl):

Cntd …
8. HTML List Tags:
1.Ordered List or Numbered List (ol):
2.Unordered List or Bulleted List (ul):
3.Description List or Definition List (dl):

Cntd …
8. HTML List Tags:
1.Ordered List or Numbered List (ol): An ordered list starts with <ol> tag. Each list
item starts with the <li> tag. Example:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Cntd …
8. HTML List Tags:
2. Unordered List or Bulleted List (ul): An unordered list starts with
the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by
default: It can have one of the values (disc, circle, square and none):
Example.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Cntd …
8. HTML List Tags:
3. Description List or Definition List (dl): It displays elements in definition form
like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.
The 3 HTML description list tags are as follows:
Example:
1.<dl> tag defines the description list.
<dl>
2.<dt> tag defines data term.
<dt>Coffee</dt>
3.<dd> tag defines data definition (description).
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Cntd …
9. HTML FORM Tags:
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. .

Cntd …
9. HTML FORM Tags: Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

Cntd …
9. HTML FORM Tags:
Output:
Example:
1.<body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6.</body>

https://www.javatpoint.com/html-form-attribute
Cntd …
9. HTML INPUT Tags:
Output:
Example:
<HTML>
<HEAD>
<TITLE>OPTION TAG</TITLE>
<BODY>
<FORM ACTION="HTTPS://WWW.GOOGLE.COM">
NAME<BR>
<INPUT TYPE="TEXT"><BR> PASSWORD<BR>
<INPUT TYPE="PASSWORD"
NAME="PASSWORD"><BR>
<INPUT TYPE="SUBMIT" VALUE="SUBMIT">
<INPUT TYPE="RESET" VALUE="RESET">
</BODY>
</HTML>

https://www.javatpoint.com/html-form-attribute
Cntd …
10. HTML FRAMESET Tags: 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.

https://www.tutorialspoint.com/html/html_frames.htm Cntd …
10. HTML FRAMESET Tags:
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames
in your WebPages:
• Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
• Sometimes your page will be displayed differently on different computers due to
different screen resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers that do not support frame technology.

https://www.tutorialspoint.com/html/html_frames.htm Cntd …
10. HTML FRAMESET Tags:
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.

https://www.tutorialspoint.com/html/html_frames.htm Cntd …
10. FRAMESET Attributes:
cols: The cols attribute is used to create vertical frames in a web browser.
This attribute is basically used to define the no. of columns and their
size inside the frameset tag.
rows: The rows attribute is used to create horizontal frames in the web
browser. This attribute is used to define the no. of rows and their
size inside the frameset tag.
border: This attribute of frameset tag defines the width of the border of
each frame in pixels. Zero value is used for no border.

https://www.tutorialspoint.com/html/html_frames.htm Cntd …
10. FRAMESET Attributes:
frameborder: This attribute of frameset tag is used to specify whether a
three-dimensional border should be displayed between the
frames or not for this use two values 0 and 1, where 0
defines no border and value 1 signifies for yes there will be
a border.
framespacing: This attribute of frameset tag is used to specify the amount
of spacing between the frames in a frameset. This can take
any integer value as a parameter which basically denotes
the value in pixel.

https://www.tutorialspoint.com/html/html_frames.htm Cntd …
10. FRAMESET

Example:

<frameset rows="50%,50%"><frame
src="form_required_attributes.html"><frame
src="Responsive_Registration_Form.html">
</frameset>

https://www.javatpoint.com/html-form-attribute
Cntd …
10. FRAMESET

Example1:

<frameset rows="50%,50%"><frame
src="form_required_attributes.html"><frame
src="Responsive_Registration_Form.html">
</frameset>

https://www.javatpoint.com/html-form-attribute
Cntd …
10. FRAMESET

Example2:

<frameset rows="50%,50%">

<frameset cols="50%,50%">
<frame src="form_required_attributes.html">
<frame src="Responsive_Registration_Form.html">
</frameset>

<frame src="Registration_form.html">

</frameset>

https://www.javatpoint.com/html-form-attribute
Cntd …
10. FRAMESET Example:
<head>
<title>frameset attribute</title>
</head>
<!-- frameset attribute starts here -->
<frameset rows = "20%, 60%, 20%">
<frame name = "top" src = “abc.123" />
<frame name = "main" src = " abc.123 " />
<frame name = "bottom" src = " abc.123 " />
<noframes>
<body>The browser you are working does not
support frames.</body>
</noframes>
</frameset>
<!-- frameset attribute ends here -->
</html>

https://www.javatpoint.com/html-form-attribute
Cntd …
HTML attributes are used to describe the characteristic of an HTML
element in detail.
• All HTML elements can have attributes.
• Attributes provide additional information about elements.
• Attributes are always specified in the start tag.
• Attributes usually come in name/value pairs like: name=“value”

In this instance, the image source (src) and the alt text (alt) are attributes
of the <img> tag.

Cntd …
The src Attributes: The <img> tag is used to embed an image in an
HTML page. The src attribute specifies the path to the image to be
displayed.
Example:
<img src="img_girl.jpg">

https://www.w3schools.com/html/html_attributes.asp Cntd …
There are two ways to specify the URL in the src attribute:
1. Absolute URL Links to an external image that is hosted on another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may be in
violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or
changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the
domain name. If the URL begins without a slash, it will be relative to the current page. Example:
src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change domain.

https://www.w3schools.com/html/html_attributes.asp Cntd …
The width and height Attributes: The <img> tag should also contain
the width and height attributes, which specify the width and height of the
image (in pixels). Example:

<img src="img_girl.jpg" width="500" height="600">

https://www.w3schools.com/html/html_attributes.asp Cntd …
The alt Attributes: The alt attribute specifies an alternate text for an
area, if the image cannot be displayed. The alt attribute provides
alternative information for an image if a user for some reason cannot view
it (because of slow connection, an error in the src attribute, or if the user
uses a screen reader). Example:

<img src="img_girl.jpg" alt="Girl with a jacket">

https://www.w3schools.com/html/html_attributes.asp Cntd …
The style Attributes: The style attribute is used to add styles to an
element, such as color, font, size, and more. Example:

<p style="color:red;">This is a red paragraph.</p>

https://www.w3schools.com/html/html_attributes.asp Cntd …
The lang Attributes: You should always include the lang attribute inside
the <html> tag, to declare the language of the Web page. This is meant to
assist search engines and browsers. Example:
Country codes can also be added to the language code in the lang attribute. So, the
<!DOCTYPE html> first two characters define the language of the HTML page, and the last two
characters define the country.
<html lang="en"> <!DOCTYPE html>
<body> <html lang="en-US">
OR,
... <body>
</body> ...
</body>
</html>
</html>

https://www.w3schools.com/html/html_attributes.asp Cntd …
The title Attributes: The title attribute defines some extra information
about an element.
The value of the title attribute will be displayed as a tooltip when you
mouse over the element. Example:

<p title="I'm a tooltip">This is a paragraph.</p>

https://www.w3schools.com/html/html_attributes.asp
HTML Required Attributes: he HTML Required attribute is a Boolean
attribute which specifies that the input element must be filled out
before the submission of form. This attribute used with the following
elements:
<input>
<select>
<textarea>
<input>
We can easily use the required attribute with the <input> element as
shown in the following syntax:

<input required> Example

https://www.javatpoint.com/html-required-attribute
• A hyperlink, also called a link or web link, contains an address for a
destination and acts as a reference to data.
• HTML links are hyperlinks.
• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into a
little hand.
• The HTML <a> tag defines a hyperlink. Example:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

Note: A link does not have to be text. A link can be an image or any other HTML element!

https://www.w3schools.com/html/html_attributes.asp Cntd …
1. HTML Links - Different Colors
An HTML link is displayed in a different color depending on whether it
has been visited, is unvisited, or is active.
By default, a link will appear like this (in all browsers):
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

You can change the link state colors, by using CSS:


[We will discuss about this in CSS Lecture]

https://www.w3schools.com/html/html_attributes.asp Cntd …
2. HTML Links - Use an Image as a Link: To use an image as a link, just
put the <img> tag inside the <a> tag. Example:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

https://www.w3schools.com/html/html_attributes.asp Cntd …
3. HTML Links - Link to an Email Address: Use mailto: inside
the href attribute to create a link that opens the
user's email program (to let them send a new email).
Example:

<a href="mailto:someone@example.com">Send email</a>

https://www.w3schools.com/html/html_attributes.asp Cntd …
4. HTML Links - Button as a Link: To use an HTML button as a link,
you have to add some JavaScript code.

JavaScript allows you to specify what happens at


certain events, such as a click of a button. Example:

<button onclick="document.location='default.asp'">HTML Tutorial</button>

https://www.w3schools.com/html/html_attributes.asp Cntd …
Definition and Usage
The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.
The <video> tag contains one or more <source> tags with different video sources. The browser will choose the
first source it supports.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the
<video> element.
There are three supported video formats in HTML: MP4, WebM, and OGG.

Browser MP4 WebM Ogg


Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

https://www.w3schools.com/tags/tag_video.asp Cntd …
Definition and Usage
The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
Audio Format and Browser Support

Browser MP3 WAV OGG


Edge / IE YES YES* YES*
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

https://www.w3schools.com/tags/tag_video.asp Cntd …

You might also like