What are HTML Attributes ?

Last Updated : 24 Apr, 2025

HTML attributes are the entities that provide the extra information about the tags. Attributes are specified using name and value pair. Some HTML tags are used without attributes while for some tags it's important to specify attributes along with them. In paired tags attributes are specified in the opening tag. The value of the attribute is specified between the quotes. They are used to add extra effects to the element.

Syntax:

<tag_name attribute_name='attribute value'> Content of the tag </tag_name>

Table of Content

Meta Tag Attributes
Global Attributes
Event-handling Attributes
Boolean Attributes

Meta Tag Attributes

Meta tags provide important meta information about HTML documents. They are self-closing tags. Attributes of the meta tag are crucial for browser functionality, including search engine optimization, character set declaration, and viewport control.

Attribute	Description
charset	Specifies the character encoding for the HTML document.
name	Specifies the name of the metadata attribute.
content	Provides information associated with the specified name.
http-equiv	Defines an HTTP header for the information in the content.
scheme	Specifies the format used to interpret the content value.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">

    <title>Meta Tag Attribute</title>
</head>

<body>
    <h2>Welcome To GFG</h2>
    <p>Some attribute of the meta tag</p>
    <ol>
        <li> charset="UTF-8"</li>
        <li> name="description" content="Description "</li>
        <li> name="keywords" content="GFG,GeeksforGeeks"</li>
        <li>
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        </li>
    </ol>

</body>

</html>

Output:

Screenshot-2024-02-02-104248

Global Attributes in HTML

This type of attribute are applied on all types of HTML tags.Some of the commonly used global attributes are class ,id,style. "class" attribute is used to group elements and to style the grouped element and "id" attribute must be unique. It is used to apply functionality or styles to unique element.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <style>
        body {
            text-align: center;
        }

        h2 {
            color: green;
        }

        .Paragraph {
            background-color: aqua;
        }

        #container {
            background-color: red;
        }
    </style>
</head>

<body>
    <h2>Welcome to GFG</h2>
    <p class="Paragraph">
        Class Attribute with value as 
          Paragraph (class="Paragraph")
    </p>
    <div id="container">
        id Attribute with value as 
          container (id="container")
    </div>
</body>

</html>

Output:

Screenshot-2024-02-02-105851

Event-handling Attributes

Event handling attributes are used to add the functionality to the HTML document.The Value of the event handler attribute is the javascript function.The function gets executed as the event occurs.Some of the commonly used event handler attributes are onclick,onchange,onsubmit,ondblclick.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Event handler Attribute</title>
    <style>
        body {
            text-align: center;
        }

        h2 {
            color: green;
        }

        #container {
            cursor: pointer;
        }
    </style>
    <script>
        const changeColor = () => {
            const element = document.getElementById("container");
            element.style.color = "red";
        };
    </script>
</head>

<body>
    <h2>Welcome to GeeksforGeeks</h2>
    <div id="container" onclick="changeColor()">
      Click to change the text color\
      </div>
</body>

</html>

Output

edr

Boolean Attribute

Boolean attributes in HTML are attributes that, when present, are considered "true" and don't require a value. They are commonly used for toggling certain behaviors or states, such as the `disabled` attribute for form elements.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Boolean Attribute Example</title>
    <style>
        body {
            text-align: center;
        }

        h2 {
            color: green;
        }

        button {
            padding: 10px;
            font-size: 16px;
        }
    </style>
    <script>
        const toggleButton = () => {
            const buttonElement = 
                  document.getElementById("myButton");
            buttonElement.disabled = !buttonElement.disabled;
        };
    </script>
</head>

<body>
    <h2>Welcome to Boolean Attribute Example</h2>
    <button id="myButton" onclick="toggleButton()">
          Click me (Toggle disabled attribute)
      </button>
</body>

</html>

Output:

edr

HTML | aria-label attribute

pritamfulari27

Improve

Article Tags :

What are HTML Attributes ?

Syntax:

Meta Tag Attributes

Global Attributes in HTML

Event-handling Attributes

Boolean Attribute

Similar Reads

Thank You!

What kind of Experience do you want to share?