HTML5 Attributes

As you might have seen in the HTML5 tutorials, HTML5 elements contain attributes that assign properties to HTML elements.

Some HTML5 attributes are specified globally, while some are inserted inside any HTML element.

All the HTML5 attributes have a name and have a value. To widen your understanding, let’s take a coding example.

<div class = “sample”></div>

The code listed above is an example of HTML5 attributes. Using the “class” attribute, we can illustrate how to target div elements in my CSS or Javascript code using the “class” attribute.

Since HTML5 attributes are case insensitive, you are free to use lowercase, uppercase, or mixed case letters to define them.

Generally, developers use lowercase letters to define attributes.

Example of Class Attributes

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Attributes </title>
    <style>
        .sample {
            background-color: springgreen;
            font-weight: bold;
            font-color: white;
        }
    </style>
</head>
<body>
    <div class="sample">
        This is my first paragraph
    </div>
</body>
</html>

The output of this code will be

Example of Id Attribute

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Attributes </title>
    <style>
        #test {
            background-color: tomato;
            height: 300px;
            width: 350px;
        }
    </style>
</head>
<body>
    <div id="test">
    </div>
</body>
</html>

It is how the id attribute apply CSS to the div element

Examples

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Attributes </title>
</head>
<body>
    <p style="text-align: center;">This is my first paragraph</p>
</body>
</html>

The output of this code will be

Standard HTML5 Attributes

Below is the list of HTML5 attributes that are supported by almost all the HTML tags.

Align: It accepts the value right, left, or center and aligns the text left, right, or center.
Background: we can assign the URL of an image that we want to display behind an element.
Bg color takes the numeric, hexadecimal, or RGB values and applies a background color behind an element.
Class: it takes the user-defined value and groups the element, which can then be used for applying CSS or JavaScript
contenteditable: we can assign the value true or false to this attribute, and it specifies whether the user will be able to edit the content or not.
Contextmenu: we can assign the value menu_id to this attribute, defining the context menu for an element.
Data-XXXX: We can assign user-defined value to it. With this attribute, the author of an HTML document can define their attribute that must begin with “data -“
Draggable: We can assign the value true, false, or auto to this attribute. It defines whether or not users will be able to drag and drop the content.
Height: it takes a numeric value and specifies the height of tables and images.
Hidden: it takes the value hidden and defines whether an element will be visible to users.
Id: It takes a user-defined value and names an element that has to be used for CSS.
Item: it takes a list of elements as a value and groups the list of related elements.
Spellcheck takes the value true or false and defines if an element has been checked to check its spelling or grammar.
Style: it takes the link to the CSS file as a value and specifies the style for the HTML document.
Width: it takes a numeric value and defines width for tables and images
Valign: it takes value top, middle, or bottom and vertically aligns tags within HTML5 document.
Title: it takes a user-defined value and specifies the title for your HTML document.

Custom Attributes in HTML5

The new development in HTML5 is the inclusion of custom data attributes in it.

In HTML5, custom data attributes begin with data and have to be named based on your requirement. Here is a code snippet for that:

<div class=”sample” data-subject=”chemistry” data-level=”easy”>
</div>

The code displayed above has two main custom attributes, namely data subject and data-level. You can retrieve the values of these attributes using JavaScript APIs or CSS as you do with standard attributes.

To learn more about the attributes, check out our reference style.

Next Lesson » « Previous Lesson