Scribd
Upload
92 views

HTML Audio Tag: HTML Audio Tag Is Used To Define Sounds Such As Music and Other Audio Clips. Currently There

The document discusses several HTML tags: 1. The <audio> and <video> tags are used to embed audio and video content in a webpage. They support file formats like mp3, wav, ogg, and mp4. 2. The <canvas> tag defines an area for drawing using scripting. The <progress> tag displays the progress of a task by defining a value and maximum. 3. Other tags discussed include <datalist> for autocomplete, <figure> and <figcaption> for images and captions, and <details> and <summary> for disclosure widgets.

Uploaded by

Luckysingh Negi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
92 views

HTML Audio Tag: HTML Audio Tag Is Used To Define Sounds Such As Music and Other Audio Clips. Currently There

The document discusses several HTML tags: 1. The <audio> and <video> tags are used to embed audio and video content in a webpage. They support file formats like mp3, wav, ogg, and mp4. 2. The <canvas> tag defines an area for drawing using scripting. The <progress> tag displays the progress of a task by defining a value and maximum. 3. Other tags discussed include <datalist> for autocomplete, <figure> and <figcaption> for images and captions, and <details> and <summary> for disclosure widgets.

Uploaded by

Luckysingh Negi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML Audio Tag

HTML audio tag is used to define sounds such as music and other audio clips. Currently there
are three supported file format for HTML 5 audio tag.

1. mp3
2. wav
3. ogg

Eg:

<!DOCTYPE>

<html>

<body>

<audio controls>

<source src="koyal.mp3" type="audio/mpeg">

Your browser does not support the html audio tag.

</audio>

</body>

</html>

Attributes of HTML Audio Tag

There is given a list of HTML audio tag.

Attribute Description

Controls It defines the audio controls which is displayed with play/pause buttons.

autoplay It specifies that the audio will start playing as soon as it is ready.

Loop It specifies that the audio file will start over again, every time when it is completed.

Muted It is used to mute the audio output.

Src It specifies the source URL of the audio file.


Eg:
<!DOCTYPE>
<html>
<body>
<audio controls loop>
<source src="abc.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>
</body>
</html>

HTML Video Tag


HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such
as a movie clip, song clip on the web page.

Currently, there are three video formats supported for HTML video tag:

1. mp4
2. webM
3. ogg

Eg:

<!DOCTYPE>

<html>

<body>

<video controls>

<source src="movie.mp4" type="video/mp4">

Your browser does not support the html video tag.

</video>

</body>

</html>
Attributes of HTML Video Tag

Attribute Description

Controls It defines the video controls which is displayed with play/pause buttons.

Height It is used to set the height of the video player.

Width It is used to set the width of the video player.

Poster It specifies the image which is displayed on the screen when the video is not played.

autoplay It specifies that the video will start playing as soon as it is ready.

Loop It specifies that the video file will start over again, every time when it is completed.

Muted It is used to mute the video output.

Src It specifies the source URL of the video file.

Eg:

<!DOCTYPE>

<html>

<body>

<video width="320" height="240" controls autoplay loop>

<source src="movie.mp4" type="video/mp4">

Your browser does not support the html video tag.

</video>

</body>

</html>
HTML Canvas Tag
A canvas is a rectangle like area on an HTML page. It is specified with canvas element. By default, the
<canvas> element has no border and no content, it is like a container.

Eg:

<!DOCTYPE>

<html>

<body>

<canvas id="myCanvas" width="300" height="200" style="border:2px solid;">

Your browser does not support the HTML5 canvas tag.

</canvas>

</body>

</html>

HTML Progress Tag


HTML <progress> tag is used to display the progress of a task. It provides an easy way for web
developers to create progress bar on the website. It is mostly used to show the progress of a file
uploading on the web page.

Attributes of HTML Progress Tag

HTML <progress> tag supports the global and event attributes as well as 2 specific attributes.

Tag Description

value It defines that how much work the task has been completed.

max It defines that how much work the task requires in total.

Eg:

<!DOCTYPE>

<html>
<body>

Downloading progress:

<progress value="43" max="100"></progress>

</body>

</html>

HTML Datalist Tag


The HTML <datalist> tag is is used to provide an auto complete feature on form element. It
provides a list of predefined options to the users to select data.

The datalist tag is introduced in HTML5.

The <datalist> tag should be used with an <input< element that contains a "list" attribute. The
value of "list" attribute is linked with the datalist id.

Eg:

<!DOCTYPE>

<html>

<body>

List of Sudents :

<input type="text" list="students">

<datalist id="students">

<option value="STU1">

<option value="STU2">

<option value="STU3">

</datalist>

</body>

</html>
HTML figure tag
<!DOCTYPE>

<html>

<body>

<figure>

<img src="a.jpg" alt="Taj Mahal"/>

</figure>

</body>

</html>

HTML figcaption tag


The <figcaption> element is used to provide a caption to an image.

It is an optional tag and can appear before or after the content within the <figure> tag.

The <figcaption> element is used with <figure> element.

Eg:

<!DOCTYPE>

<html>

<body>

<figure>

<img src="a.jpg" alt="Taj Mahal"/>

<figcaption>Image.</figcaption>

</figure>

</body>

</html>
HTML Summary Tag
The HTML <summary> tag is used with <details> tag. It is used as a summary, caption or legend
for the content of a <details> element.

It is used within the <details> tag. It must have a closing tag.

Eg:

<!DOCTYPE>

<html>

<body>

<details>

<summary>MSC IT</summary>

<p>sem ii</p>

<p>sem iv</p>

</details>

</body>

</html>

HTML Required Attribute


The required attribute is a boolean attribute.

When present, it specifies that an input field must be filled out before submitting the form.

EG:
<!DOCTYPE html>
<html>
<body>

<form action="">
Username: <input type="text" name="usrname" required>
<input type="submit" value=”click”>
</form>
</body>
</html>

Eg:
<html>
<body>

<form action="">
<select required>
<option value="">Select</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
</select>
<input type="submit">
</form>

</body>
</html>
HTML <tbody> Tag
The <tbody> tag is used to group the body content in an HTML table.

The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify
each part of a table (body, header, footer).

Eg:
<html>
<body>
<table border = "1">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Eg:
<!DOCTYPE html>
<html>
<head>
</head>

<body>

<table border="1">
<thead>
<tr>
<th>Number</th>
<th>Value</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Number1</td>
<td>100</td>
</tr>
<tr>
<td>Number2</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>

You might also like