logo
HTML5 Data Tag
The HTML <data> tag is used for providing a machine-readable version of its own contents. This can be useful in cases where your data needs to be in a certain format because it may be processed by a script, but this might not be the format that you'd like your users to see.

The <data> tag enables you to overcome this by providing two numbers, one for the users (provided within the <data></data> tags) and one for the script (provided in the value attribute). This could look something like: <data value="1">One</data>.
Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Data Tag</title>
    </head>
    
    <body>
    
    <p><b>HTML5 Data Tags</b></p>
        <ul>
            <li><data value="12345">HTML5 Sample Data Tag</data></li>
            <li><data value="23456">HTML5 Sample Data Tag 2</data></li>
            <li><data value="34567">HTML5 Sample Data Tag 3</data></li>
        </ul>
 
    </body>
    
</html>
Output :

HTML5 Data Tags

  • HTML5 Sample Data Tag
  • HTML5 Sample Data Tag 2
  • HTML5 Sample Data Tag 3
HTML5 Datalist Tag
The HTML <datalist> tag is used for providing an "autocomplete" feature on form elements. It enables you to provide a list of predefined options to the user as they input data.

The HTML5 <datalist> tag can be used in conjunction with an <input> element that contains a list attribute.

The list attribute is linked to the <datalist> tag by the <datalist> tag's ID. For example, if the <datalist> tag contains id="myData", then the list attribute will look like this: list="myData".
Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Data Tag</title>
    </head>
    
    <body>
    
        <h4>Example 1 (HTML 5 browsers)</h4>
         <label>
          Enter your Sample Text : <br />
          <input type="text" name="favCharacter" list="sample_text" maxlength="50" style="width:100%;">
          <datalist id="sample_text">
           <option value="Sample Text - 1">
           <option value="Sample Text - 2">
           <option value="Sample Text - 3">
          </datalist>
         </label>
        <h4>Example 2 (HTML 5 &amp; Another browsers)</h4>
         <label>
          Enter your Sample Text :<br />
          <input type="text" name="favCharacter" list="sample_text" maxlength="50" style="width:100%;"><br />
         </label>
         <datalist id="sample_text">
          <label>
           <select name="favCharacter">
            <option>Sample Text - 1
            <option>Sample Text - 2
            <option>Sample Text - 3
           </select>
          </label>
         </datalist>
 
    </body>
    
</html>
Output :

Example 1 (HTML 5 browsers)

Example 2 (HTML 5 & Another browsers)