HTML has abundant availability of attributes. Each element may have one or a few attributes used to define different properties of a particular HTML element. There are several types of HTML elements. Let us now understand the HTML attributes.
What Are Attributes in HTML?
An attribute is a property name used to provide supplementary information about HTML elements. Some common examples of HTML attributes are id, class, align, etc. Many attributes are defined globally and are applied to any element, whereas we use some of them only for specific HTML elements. The syntax is:
Syntax:
<element_name attribute_name="value"> .... </element_name>
You can define an attribute as the characteristics of any HTML tag that needs to be placed within the opening tag.
- a name and
- a value
Names of attributes and their values are not case-sensitive. But according to the World Wide Web Consortium (W3C), it is recommended to use lowercase names and values. For an attribute, the name defines the property to be implemented. For example, BODY Tag, <body>
carries many attributes such as bgcolor, background that you can implement for indicating the back color of your webpage, or give a specific image or background texture to your page, respectively.
The value defines the value which you want to assign to the property and is set within quotations.
Example:
<!DOCTYPE html>
<html>
<body bgcolor="#E6E6FA">
</body>
</html>
Core Attributes
- id
- title
- class
- style
Let's discuss these special attributes:
id Attribute
The id attribute can be applied to assign a unique identity to any element. There can be two primary reasons for using the id attribute on an HTML element. The id attribute provides a unique identifier, which ultimately makes it possible to identify the element. When you have two elements of the same name within the same script, the id attribute helps to distinguish two similar elements through the unique ID.
Example:
<p id="para1"> Paragraph 1 in your HTML document.</p>
<p id="para2"> Paragraph 2 in your HTML document.</p>
title Attribute
This attribute gives a recommended title for your element. Its behavior depends on the element upon which it's implemented, even though this is often implemented to display a tooltip if the cursor hovers (comes over) the element.
Example:
<h3 title="Welcome to my Journal">Please visit</h3>
class Attribute
This attribute is implemented by combining an element through a stylesheet (CSS) and identifying its class element. For more about the class attribute, you can follow the Cascading Style Sheet (CSS).
Here's an example of a class attribute:
Example:
<p class="classname1 classname2">This is a sample paragraph text.</p>
style Attribute
This attribute gives you a chance for specifying the rules for Cascading Style Sheet (CSS) in your element.
Example:
<p style="font-family:arial;">An example of style attribute.</p>
Some other popular HTML attributes are:
Attribute | Usage |
---|---|
align | It is used to align HTML tags horizontally, left, right, or center. |
background | It is used to set a background image behind an HTML element |
accesskey | It is used to add a specific keyboard shortcut to access an HTML element. |
contextmenu | It is used to specify the context menu of an HTML element. |
item | It is used to group HTML elements. |
hidden | It is used to specify whether your HTML element should be visible or not. |