HTML Attributes

Sometimes in HTML tags are not enough to perform the necessary action. We need some extra bits of information of particular tag.

HTML attributes are used to provied the extra information about the HTML tags.

HTML attributes

  1. HTML attributes provides extra bits of information about HTML element.
  2. HTML attributes are used to define characteristics of HTML element
  3. HTML attributes are placed inside the element’s opening tag.
  4. HTML element can have any number of HTML attributes
  5. HTML attributes comprise of two parts name and a value
  6. HTML attribute names and attribute values are case-insensitive. According to World Wide Web Consortium (W3C) recommendation lowercase attributes/attribute values are preferable
Attribute part Explanation
name It specifies the name of an attribute or property
value It specifies the value of the attribute or property 
<a href="https://www.c4learn.com">Link to Homepage</a>

In the above example,

Element is <a>
Attribute Name is href
Attribute Value is https://www.c4learn.com

We have defined the anchor tag for defining the link. Attribute name provides the information about an anchor element and its value is provided by the attribute value.

Some tips for Using HTML Attributes :

HTML attributes are generally used for providing some extra information. We have list out some important points regarding the attributes in HTML -

Tip 1 : Attribute value must be quoted

  1. Any of the HTML attribute value must written inside the double quotes.
  2. Double quote or single quote , both are allowed for wrapping the attribute value.
  3. Commonly Double quote is preferable, when attribute value itself contain the double quote then single quote can be used for wrapping the attribute value
name = 'New Delhi "102" Colony'

Tip 2 : Use Attribute values in lower case

  1. Previous versions of HTML does not force us to use the attribute values in the lowercase but W3C recommends lowercase attributes in HTML 4 recommendation
  2. It is always good practice to use the attribute name in lower case.
  3. HTML is case insensitive markup language so it does not create any harm if uppercase attribute name is used because browsers are smart enough to interpret the lowercase and uppercase tags
  4. Newer versions of (X)HTML will demand lowercase attributes.

Some common examples are listed below -

<div class  = "content"></div>
<div Class  = "content"></div>
<div clAss  = "content"></div>
<div ClaSS  = "content"></div>

all of the above div’s represents the same.

HTML core attributes

Below attributes are used commonly in HTML elements -

Attribute Explanation
alt Specifies an alternative text for an image
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
value Specifies the value (text content) for an input element. 
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute  Example</title>
</head>
<body>
<p align="left">Left aligned</p>
<p align="center">Center aligned</p>
<p align="right">Right aligned</p>
</body>
</html>

Edit Yourself »

The id Attribute

If we need to identify an elment in HTML uniquely then we can use id attribute

<p id="id1">This is para with ID #1</p>
<p id="id2">This is para with ID #2</p>
<p id="id3">This is para with ID #3</p>

Edit Yourself »

The title Attribute

The title attribute is used to give title to an element. Generally title attribute value is displayed as a tooltip when cursor comes over the element

<p title="Tooltip 1">This is para with Tooltip #1</p>
<p title="Tooltip 2">This is para with Tooltip #2</p>
<p title="Tooltip 3">This is para with Tooltip #3</p>

Edit Yourself »

The class Attribute

When we need to attach styling information to multiple elements in HTML then we use class attribute.

The style Attribute

<p style="font-family:arial; color:#FF0000;">Style 1</p>
<p style="font-family:arial; color:#00FF00;">Style 2</p>
<p style="font-family:arial; color:#0000FF;">Style 3</p>

Edit Yourself »