HTML Data Tag

HTML Data Tag: The HTML < data > tag is used to transmit its content to a machine-readable version. The data are presented in a particular format. It is useful because a script can process it, but this might not be the format we would like the users to use.

Let's consider a scenario:

Suppose we have to represent some numbers with letters (i.e., one, two, three, and so on) to our users, but we have a script that sorts the numbers in ascending or descending commands. So our script needs amounts in a format like 1, 2, and 3, and so on.

To solve the problem, < data > tag is used.

For users: write within tag < data>.... </data >.

For the script: use the attribute value.

<data value=”1”One</data>

HTML data tag attribute

There is only one required attribute. The Data tag also supports global attributes and event attributes.

Attribute	Description
Value	It is a required attribute. It is used to provide content for the computer-readable version of the name.

HTML data tag example

<!DOCTYPE>
<html>
<body>
<ul>
<li><data value="101">Java Tutorial</data></li>
<li><data value="111">SQL tutorial</data></li>
<li><data value="121">HTML tutorial</data></li>
<li><data value="131">HTML Hadoop Tutorial</li>
</ul>
</body>
</html>

Output

Supporting Browsers

Element	Chrome	IE	Firefox	Opera	Safari
<data>	Yes	Yes	Yes	Yes	Yes

HTML Datalist Tag

The HTML < datalist > tag is used to provide a complete auto function on the form element. It provides users with a list of predefined options for selecting data.

HTML5 includes the datalist tag.

The tag < datalist > should be used with the element < input >, which contains the attribute "list." The value of the "list" attribute is related to the Datalist Id.

Example

Let's look at the simple example of the data list tag HTML5. If you press A, a list of cricketers will appear, starting with A letter.

<!DOCTYPE>
<html>
<body>
<label>
 Enter your favorite cricket player: Press any character<br />
<input type="text" id="favCktPlayer" list="CktPlayers">
<datalist id="CktPlayers">
<option value="Mahendra Singh Dhoni ">
<option value="ViratKholi">
<option value="Rohit Sharma">
<option value="Ricky Ponting">
<option value="Rahul Dravid">
<option value="ShikherDhawan">
<option value="Surash Raina">
<option value="Donald Bradman">
<option value="SauravGanguly ">
<option value="AB diVilliers">
<option value="RavindraJadeja">
<option value="Adam Gilchrist">
</datalist>
</label>
</body>
</html>

Output

Supporting Browser

Element	Chrome	IE	Firefox	Opera	Safari
<datalist>	Yes	Yes	Yes	Yes	Yes

HTML Dialog tag

Log > tag is used to create a new web-page popup dialog. This tag is a dialog box or some interactive feature like a window. The < dialog > element uses the open boolean attribute that activates the component and makes it easier for the user to interact.

A new tag implemented in HTML5 is the HTML dialog.

HTML dialog tag example

<!DOCTYPE>
<html>
<body>
<div>
<dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p><q>I am so clever that sometimes I don't understand a single word of what I am saying.  
</q> - <cite>Oscar Wilde</cite></p>
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
</div>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {   
var dialog = document.getElementById('myFirstDialog');   
document.getElementById('show').onclick = function() {   
dialog.show();   
    };   
document.getElementById('hide').onclick = function() {   
dialog.close();   
    };   
})();  
</script>
</body>
</html>

Output

The HTML Dialog tag also supports HTML attributes for global and events.

Supporting Browsers

Element	Chrome	IE	Firefox	Opera	Safari
<dialog>	Yes	Yes	Yes	Yes	Yes