HTML Attributes

We have learn about the basic tag structure and document structure of the webpage. HTML attributes plays vital part while writing the HTML document.

HTML Attributes :

  1. HTML attribute is used to define the characteristics of an element.
  2. HTML attributes are written inside the element’s opening tag.
  3. HTML attributes are made up of two parts : a name and a value
  4. HTML attributes provides additional information of an element
<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.

Commonly Used Attributes are :

below is the list of commonly used attributes defined in HTML -

Attribute Description
class class attribute specifies one or more class names for an element
id id attribute specifies the unique id for element
style style attribute is used for inline styling of the elements
title title attribute generally used for tool tip for an element

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.