HTML <track>
Tag
The <track>
element is used to specify subtitles, caption files, or other files containing text that should be visible when playing media.
This element is used as a child inside the media element, <audio>
and <video>
.
Tracks are formatted in Web Video Text Tracks (WebVTT) format or .vtt file format.
Element Attributes
Attribute | Value | Description |
---|---|---|
default |
default | This Specifies that the track should be enabled unless user preferences indicate that the other track is more appropriate. |
kind |
captions chapters descriptions metadata subtitles |
Specifies the type of text track. |
label |
text | It specifies the title of the text track.. |
src |
url | Required. It specifies the URL of the track file. |
srclang |
language_code | This specifies the language of the track text data. Required only for kind="subtitles". |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>
,
<class>
,
<contenteditable>
,
<contextmenu>
,
<data-*>
,
<dir>
,
<draggable>
,
<dropzone>
,
<hidden>
,
<id>
,
<lang>
,
<spellcheck>
,
<style>
,
<tabindex>
,
<title>
,
<translate>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
<meta charset="utf-8" />
<style>
button{
width: 150px;
height: 50px;
background-color: cornflowerblue;
font-size: 14pt;
color: white;
border-radius: 10px;
}
button:hover{
background-color: rgb(17, 87, 218);
color: white;
}
</style>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "w3context JavaScript Tutorials";
document.getElementById("demo").style.color = "blue";
document.getElementById("demo").style.fontSize = "18pt";
}
</script>
</head>
<body>
<h2>HTML Example</h2>
<p>Click this button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Magazzini Alimentari Moctezuma</td>
<td>Yoshi Chang</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Futterkiste</td>
<td>Giovanni Anders</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Trading</td>
<td>Bennett Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Handel</td>
<td>Mendel Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Centro comercial Riuniti</td>
<td>Maria Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Alfreds Winecellars </td>
<td>Francisco Tannamuri</td>
<td>Canada</td>
</tr>
</table>
</body>
</html>
Click on the "Try it Now" button to see how it works.