HTML Attributes

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:
  • a name and
  • a value

Names of attribute and its values are not case-sensitive. But according to the World Wide Web Consortium (W3C), it is recommended to use lowercase name and value. 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 basic attributes which you can implement on almost all HTML elements:
  • id
  • title
  • class
  • style

Let's discuss these special attributes:

id Attribute

This attribute can be implemented for providing unique identification to any element. There are two primary reasons that you might want to use an id attribute on an element. The id attribute provides a unique identifier which eventually makes possible in identifying the HTML element. When you will be containing two elements having the same name within the same script, id attribute helps to distinguish the two same elements via 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 gives a recommended title for your element. This attribute's behavior totally 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 identify the element's class. For more about class attribute, you can follow the Cascading Style Sheet (CSS).

Here's an example of 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>

Courses
Subscribe Updates via Email

Join 49,000+ W3schools lovers and get all the latest tutorials, programs, algorithms in your inbox.