Ch-2HTML
Ch-2HTML
HTML: Introduction, Basic Structure of HTML , Head Section and Elements of Head Section, Formatting Tags :Bold
, Italic, Underline, Strikethrough, Div,Pre Tag Anchor links and Named Anchors ImageTag, Paragraphs,
Comments, Tables : Attributes –(Border, Cellpadding, Cellspacing , height , width), TR, TH, TD, Rowspan, Colspan
Lists : Ordered List , Unordered List , Definition List, Forms, Form Elements, Input types, Input Attriutes, Text
Input Text Area, Dropdown, Radio buttons , Check boxes ,Submit and Reset Buttons Frames : Frameset , nested
Frames HTML 5 Introduction , HTML5 New Elements: Audio Tag, Video Tag, HTML5 Form Validations: Require
Attribute, Pattern Attribute , Autofocus Attribute, email, number type, date type , Range type
What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content.
• Web pages can be created and modified by using professional HTML editors.
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
Open the saved HTML file in your favorite browser (double clicks on the file, or right-click - and choose "Open with").
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
<!DOCTYPE html>
HTML Headings
<h1> defines the most important heading. <h6> defines the least important heading:
Example
HTML Paragraphs
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
The HTML element is everything from the start tag to the end tag:
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example
This text is bold
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.
Example
<strong>This text is important!</strong>
Example
<small>This is some smaller text.</small>
The HTML <mark> element defines text that should be marked or highlighted:
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through
deleted text:
Example
<p>My favorite color is <del>blue</del> red.</p>
The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted
text:
Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is
sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H 2O:
Example
<p>This is <sub>subscripted</sub> text.</p>
The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is
sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1]:
Example
<p>This is <sup>superscripted</sup> text.</p>
IMAGES
Images are very important to beautify as well as to depict many complex concepts in simple way on your web page.
This tutorial will take you through simple steps to use images in your web pages.
You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image
file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be
displayed.
Example
To try following example, let's keep our HTML file test.htm and image file test.png in the same directory −
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" >
</body>
</html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height =
"100">
</body>
</html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3">
</body>
</html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align =
"right">
</body>
</html>
If you want the entire page to have a background image, you must specify the background image
on the <body> element:
Example
Add a background image for the entire page:
<style>
body
{
background-image: url('img_girl.jpg');
}
</style>
Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and
vertically, until it reaches the end of the element:
Example
<style>
body
{
background-image: url('example_img_girl.jpg');
}
</style>
To avoid the background image from repeating itself, set the background-repeat property to no-
repeat.
Example
<style>
body
{
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Div Tag | HTML
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web
page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing (</div>)
tag and it is mandatory to close the tag. The Div is the most usable tag in web development because it helps
us to separate out data in the web page and we can create a particular section for particular data or function
in the web pages.
• Div tag is Block level tag
• It is a generic container tag
• It is used to the group of various tags of HTML so that sections can be created and style can be applied to them.
<html>
<head>
<title>gfg</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
}
div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
</body>
</html>
LINKS
A webpage can contain various links that take you directly to other pages and even specific parts of a given
page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you
can create hyperlinks using text or images available on a webpage.
Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a>
tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked
document. Following is the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
Example
Let's try following example which links http://www.tutorialspoint.com at your page −
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials
Point</a>
</body>
</html>
Tutorials Point
Example
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline.
An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will
become red and underlined:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
1
_blank
Opens the linked document in a new window or tab.
2
_self
Opens the linked document in the same frame.
3
_parent
Opens the linked document in the parent frame.
Example
Try following example to understand basic difference in few options given for target attribute.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
</body>
</html>
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>
Internal linking
HTML internal link is linked within the same web page. This link can be an absolute path or relative path.
HTML internal link name is followed by the hash sign(#). You have to assign an id to refer section of your
page, which is referred to as an internal link to the same page.
When you click on an internal anchor link, you will scroll automatically to the referred section and display it on
your browser.
Notes: You can not use name attribute instead of id attribute. Because name attribute not supported in
HTML5. Use the id attribute instead of.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#lession1">Lession.1</a><br />
<a href="#lession2">Lession.2</a><br />
<a href="#lession3">Lession.3</a><br />
<a href="#lession4">Lession.4</a><br />
<br />
<a id="lession1">Introduction of Lession.1</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a id="lession2">Introduction of Lession.2</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a id="lession3">Introduction of Lession.3</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a id="lession4">Introduction of Lession.4</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>
HTML TABLES
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and
columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to
represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you
can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Tables Backgrounds
You can set table background using one of the following two ways −
• 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.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these
attributes.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Here is an example of using background attribute. Here we will use an image available in /images directory.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
• Item
• Item
• Item
• Item
1. First item
2. Second item
3. Third item
4. Fourth item
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Value Description
The list items will be marked with bullets (small black circles) by default:
Example 1
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example 2
<ul type=square>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example 3
<ul>
<li>Coffee</li>
<li type=circle>Tea</li>
<li type = square>Milk</li>
</ul>
Example 4
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
✓ Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Example 1
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start=500>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li type=”A” value=6>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Example
<ol>
<li type=a value=10 >Coffee</li>
<li type=I value=20>Tea</li>
<li>Milk</li>
</ol>
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Coffee</dt>
<dt>Milk</dt>
</dl>
</body>
</html>
Output
A Description List
Coffee
Milk
Html forms
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Type Description
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
First name:
Last name:
Input Type Password
<input type="password"> defines a password field:
Example
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
Username:
Password:
The form-handler is typically a server page with a script for processing input data.
Example
<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>
First name:
John
Last name:
Doe
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values:
Example
<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">
<input type="reset">
</form>
First name:
John
Last name:
Doe
Submit Reset
If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
Female
Other
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox">I have a bike<br>
<input type="checkbox">I have a car<br>
<input type="checkbox">I have a boat
</form>
I have a bike
I have a car
I have a boat
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Depending on browser support, a color picker can show up in the input field.
Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
<!DOCTYPE html>
<html>
<body>
<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>
<form action="/action_page.php">
</form>
<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).</p>
</body>
</html>
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
You can also use the min and max attributes to add restrictions to dates:
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"
>
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).
Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max,
and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Time
<!DOCTYPE html>
<html>
<body>
<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>
<p>If the browser supports it, a time picker pops up when entering the input field.</p>
<form action="/action_page.php">
<input type="time">
</form>
</body>
</html>
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
<input> pattern
Input Example
An HTML form with an input field that can contain only three letters (no numbers or special
characters):
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<input type="submit">
</form>
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Safari 10 (or earlier).</p>
</body>
</html>
Password Example
An <input> element with type="password" that must contain 6 or more characters:
<form action="/action_page.php">
Password: <input type="password" pattern="{6,}" title="Six or more characters">
<input type="submit">
</form>
Password Example
An <input> element with type="password" that must contain 8 or more characters that are of at
least one number, and one uppercase and lowercase letter:
<!DOCTYPE html>
<html>
<body>
<p>A form with a password field that must contain 8 or more characters that are of at least
one number, and one uppercase and lowercase letter:</p>
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="submit">
</form>
</body>
</html>
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.
Example
Following is the example to create three horizontal frames −
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Example
Let's put the above example as follows, here we replaced rows attribute by cols and changed their width. This
will create all the three frames vertically −
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
</body>
</html>
To remove the border, add the style attribute and use the CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
The target attribute of the link must refer to the name attribute of the iframe:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>
</body>
</html>
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<Embed>
The <embed> tag defines a container for an external resource, such as a web page, a picture, a
media player,
To display video or audio, it is better to use the <video> and <audio> tags.
<!DOCTYPE html>
<html>
<head>
<title>HTML Embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "250" height = "100" />
</body>
</html>