revision:
The data-* attributes are used to store custom data private to the page or application. The data-* attributes give the ability to embed custom data attributes on all HTML elements.
Custom data attributes allow to add own information to tags in HTML. These attributes are not specific to HTML5 and the data-* attribute can be used on all HTML elements. They can be used to define own custom data attributes.
The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).
data-* attributes consist of two parts: 1/ the attribute name should NOT contain any uppercase letters, and must be at least one character long after the prefix "data-"; 2/ the attribute value can be any string.
<element data-*="somevalue">
"somevalue" specifies the value of the attribute (as a string).
HTML syntax: The syntax is simple. Any attribute on any element whose attribute name starts with data- is a data attribute.
<article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars">
…
</article>
JavaScript access : reading the values of these attributes out in JavaScript is also very simple. Use "getAttribute()" with their full HTML name to read them, but the standard defines a simpler way: a DOMStringMap you can read out via a "dataset" property. To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase).
<script>
const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
</script>
CSS access : as data attributes are plain HTML attributes, you can even access them from CSS. For example to show the parent data on the article you can use generated content in CSS with the "attr() function":
article::before {content: attr(data-parent);}
You can also use the attribute selectors in CSS to change styles according to the data:
article[data-columns="3"] {width: 400px;}
article[data-columns="4"] {width: 600px;}
Click on a species to see what type it is:
codes:
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>
<script>
function showDetails(animal) {
let animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
Click on a vegetable to see the sowing time:
codes:
<ul id="vegetable-seeds">
<li onclick="seeDetails(this)" data-spacing="10cm" data-sowing-time="March to June">Carrots
<li onclick="seeDetails(this)" data-spacing="30cm" data-sowing-time="February to March">Celery
<li onclick="seeDetails(this)" data-spacing="3cm" data-sowing-time="March to September">Radishes
</ul>
<script>
function seeDetails(vegetable) {
let vegetableType = vegetable.getAttribute("data-spacing");
let vegetableTime = vegetable.getAttribute("data-sowing-time");
alert("The " + vegetable.innerHTML + " spacing is " + vegetableType + "," +
"and " + "sowing time is from " + vegetableTime + ".");
}
</script>
It specifies the URL of the resource to be used by the object element. The data attribute of the <object> element sets the URL of the resource, which can be audio, video, pdf, flash, etc. used by the object.
<object data="URL">
URL specifies the URL of the resource to be used by the object. Possible values: an absolute URL, which points to data on another web site, or a relative URL, which points to data within a web site.
codes:
<object data="../pics/1.jpg" width="300" height="200"></object>
codes:
<object data="../pics/Wuzhen-20-10_02.mp4" width="400" height="300"></object>
It specifies the date and time when the text was deleted/inserted. When used together with the <time> element, the "datetime attribute" represent a machine-readable format of a <time> element. The datetime attribute can be used on the following elements: <del>, <ins>, <time>.
The time element does not render as anything special in any of the major browsers. Its value is not visible to the user; it only adds a semantic timestamp to the element. "datetime values" are readable by screen readers, search engines, JavaScript code, and others.
<time datetime="YYYY-MM-DDThh:mm:ssTZD">
YYYY-MM-DDThh:mm:ssTZD or PTDHMS: the date or time being specified.
Explanation of components:
YYYY - year (e.g. 2011)
MM - month (e.g. 01 for January)
DD - day of the month (e.g. 08)
T or a space - a separator (required if time is also specified)
hh - hour (e.g. 22 for 10.00pm)
mm - minutes (e.g. 55)
ss - seconds (e.g. 03)
TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)
P - a prefix for "Period"
D - a prefix for "Days"
H - a prefix for "Hours"
M - a prefix for "Minutes"
S - a prefix for "Seconds"
I have a date on .
HTML codes:
<p>I have a date on <time datetime="2021-02-14 20:00">Valentines day</time>.</p>
This is the result of a
mathematical
computer
HTML codes:
<p class="spec">This is the result of a
<del>mathematical</del>
<ins id="one" datetime="2018-11-21T15:55:03Z">computer</ins>
<time datetime="2017-02-14 20:00">and science proposal</time>
</p>
<style>
del {color: red;}
ins {color: green;}
</style>
When present, it specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate. There must only be one <track> element with a default attribute per <media> element.
<track src=" . . . " default>
The <track> tag specifies text tracks for <audio> or <video> elements. This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.
default specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate.
codes:
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
codes:
<video width="100" height="100" controls>
<track src=" " kind="subtitles" srclang="en" label="English" default>
<source id="myTrack" src=" " type="video/mp4">
</video>
When present, it specifies that the script is executed when the page has finished parsing. The defer attribute is only for external scripts (should only be used if the "src attribute" is present). The defer attribute can be used on the <script> element.
By default, HTML documents are parsed (read) from top to bottom, one line at a time. This means that if you put any JavaScript at the top of your document, it will execute before the rest of your document is done parsing. That's the default behavior of the script element. But when you add "defer" to the <script> element you disable that default behavior.
<script src=". . .js" defer></script >
The defer attribute doesn't have an assignment operator (=) or value because its behavior is built-in. The JavaScript code won't execute until the entire page is finished loading.
In a literal sense, defer means put off/postpone/wait. Without "defer", JavaScript executes as soon as it is loaded. With "defer", JavaScript waits to execute until the entire HTML page is loaded.
HTML codes:
<script src="demo_defer.js" defer></script>
The dir attribute is a Global Attribute, and can be used on any HTML element. This attribute is mandatory for the <bdo> element where it has a different semantic meaning.
<element dir= "ltr | rtl | auto "></element>
It can have the following values:
ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
auto, which lets the user agent decide.
It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.
Write this text right-to-left!
Write this text left-to-right!
This paragraph is in English but incorrectly goes right to left.
This paragraph is in English and correctly goes left to right.
codes:
<p class="spec" dir="rtl">Write this text right-to-left!</p>
<p class="spec" dir=ltr">Write this text left-to-right!</p>
<p dir="rtl">This paragraph is in English but incorrectly goes right to left.</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>
Example of the HTML "dir" attribute:
This is normal text.
This text would get displayed from left to right.
codes:
<p class="spec" dir="rtl">Example of the HTML "dir" attribute:</p>
<p class="spec">This is normal text.</p>
<p class="spec" dir="rtl">This text would get displayed from left to right.</p>
The dirname attribute enables the submission of the text direction of the input field/textarea. The "dirname" attribute can be used on the <input> and <textarea> elements.
The dirname attribute on an input element submits the element's text direction, left-to-right or right-to-left, together with the input value.
<element name=”myname” dirname=”myname.dir”></element>
The dirname attribute's value is always the name of the input field/textarea, followed by ".dir". It specifies that the text direction of the input field will be submitted.
When the form is being submitted, the text direction of the textarea will also be submitted.
codes:
<form style="margin-left:5vw;" action="action_page.php">
Text:<br>
<textarea name="explanation"dirname="explanation.dir"></textarea>
<input type="submit" value="Submit">
</form>
When the form is being submitted, the text direction of the input field will also be submitted.
codes:
<form style="margin-left:5vw;" action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" dirname="fname.dir">
<input type="submit" value="Submit">
</form>
When present, it specifies that the element should be disabled. A disabled element is unusable. The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable again.
The disabled attribute can be used on the following elements: <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea>.
<element disabled></element>
Disabled <input> elements in a form will not be submitted! The disabled attribute is usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused.
codes:
<button style="margin-left:5vw;" type="button" disabled>Click Me!</button>
<br><br>
<form style="margin-left:5vw;" action="action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
codes:
<form style="margin-left:5vw;">
<form style="margin-left:5vw;" action="action_page.php">
<fieldset disabled>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><brs><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</form>
It specifies that the file specified in the "href" attribute will be downloaded when a user clicks on the hyperlink. The optional value of the download attribute will be the new name of the file after it is downloaded.
There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.). If the value is omitted, the original filename is used.
The download attribute can be used on the <a> and <area> elements.
<a download="filename"></a>
filename is optional and specifies the new filename for the downloaded file.
Click on the image to download it:
codes:
<a href="../pics/car2.jpg" download>
<img src="../pics/car2.jpg" alt="car" width="200" height="142">
</a>
Click on the image to download it:
codes:
<a href="../pics/1.jpg" download="sweet">
<img src="../pics/1.jpg" alt="holiday" width="200" height="142">
</a>
Links and images are draggable by default. The draggable attribute is often used in drag and drop operations. The draggable attribute is a Global Attribute and can be used on
<tag draggable="true|false|auto"></tag>
draggable can have the following values: true (the element can be dragged), false (the element cannot be dragged).
If this attribute is not set, its default value is auto, which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged.
This is a draggable paragraph. Drag this element into the rectangle.
codes:
<div style="margin-left:5vw;" id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<br>
<p class="spec" id="drag1" draggable="true" ondragstart="drag(event)">
This is a draggable
paragraph. Drag this element into the rectangle.</p>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
Drag the image into the rectangle:
codes:
<p class="spec" style="margin-left:5vw;">Drag the image into the
rectangle:</p>
<div style="margin-left:5vw;" id="div2" ondrop="dropIt(event)"
ondragover="nowDrop(event)"></div>
<br>
<img id="drag2" src="../pics/cartoon.jpg" draggable="true" ondragstart="dragIt(event)"
width="110" height="70">
<script>
function nowDrop(ev) {
ev.preventDefault();
}
function dragIt(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dropIt(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>