The purpose of using a **`data`** element inside an HTML document is to link a given piece of content with a *#key# machine-readable: data in a format that a computer can process #key#* translation.

The `data` element works as a translator, as it provides content written in both human-understandable and machine-readable language. 


# Where to use a `data` element?

We use a `data` element where there is a need to make the server or computer understand the content written on the webpage.



# Syntax

A `data` element is placed inside tags (`<>`): `<data>` in an HTML document and includes both an opening (`<data>`) and closing (`</data>`) tag.

It is always mandatory to include the `value` attribute inside the `<data>` tag. Without the `value` attribute, it would not be machine-readable.

The `value` attribute represents an element's contents in a machine-readable format, i.e., binary (0's and 1's).

# Code

The following is an example of how a `<data>` element is declared and used inside an *#key# unordered-list: using the `<ul>` tags, the list items will be marked with bullets #key#*.

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        
        <h1>The data element</h1>        
        <p>API response codes:</p>
        
        <ul>
            <li><data value="400">The request was invalid.</data></li>
            <li><data value="401">Unauthorized access</data></li>
            <li><data value="404">Page not found</data></li>
        </ul>

    </body>
</html>

codemirror

What is a data element in HTML?

Links content with machine-readable data using the `<data>` tag, requiring the `value` attribute for readability.

What is a data element in HTML?

Where to use a data element?

Syntax

Code

Where to use a `data` element?