HTML Attributes

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.

HTML attributes consist of two parts:
  1. a name and
  2. 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

There are four essential attributes that you can apply to almost all HTML elements:
  1. id
  2. title
  3. class
  4. 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 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:

AttributeUsage
alignIt is used to align HTML tags horizontally, left, right, or center.
backgroundIt is used to set a background image behind an HTML element
accesskeyIt is used to add a specific keyboard shortcut to access an HTML element.
contextmenuIt is used to specify the context menu of an HTML element.
itemIt is used to group HTML elements.
hiddenIt is used to specify whether your HTML element should be visible or not.

Scroll Back to Top