HTML Attributes for web development

In our previous topics, we used tags like heading tags <h1>, <h2> and paragraph tag <p> with some other tags. They were used in their simplest form but most of the HTML tags can also have attributes which provides a bit of extra information about tags.

An attribute is used to define the characteristics of an HTML element and is placed inside the element’s opening tag. All attributes are made up of two parts − a name and a value.

For example, we want to place a paragraph with alignment left, right or center. This can be done with the help of align attribute of paragraph. The name will correspond to align and value will correspond to the placement of paragraph (“left”, “right” or “center”).

The name is the property of tag you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page. The value is what you want to set for align i.e it may be left, right or center.

name=align, value=”left” or “right” or “center

Let us take an example in the form of HTML program which is shown below:

<!DOCTYPE html> 
<html>
 <head> 
      <title>Align Attribute  Example</title> 
 </head>
 <body> 
      <p align = "left">Left aligned text.</p> 
      <p align = "center">Center aligned text.</p> 
      <p align = "right">Right aligned text.</p> 
  </body>
</html>

The output of this program is shown below:

Left aligned text.
                      Center aligned text.
                                               Right aligned text.

Core Attributes of HTML

The four core attributes that can be used on the majority of HTML elements which are used to identify elements uniquely and collectively. The four main attributes are Id, Title, Class and Style. Let us explain all the core attributes one by one.

The Id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element −

If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.

If you have two elements of the same name within a Web page, you can use the id attribute to distinguish between elements that have the same name. Let’s use the id attribute to distinguish between two paragraph elements as shown below.

Example

<p id = "html">This is the paragraph with id as html</p>
<p id = "css">This is another paragraph with id as CSS</p>

In this example we have used two paragraphs having same tag <p> but if we want to set different properties for both paragraphs then both must be uniquely defined by a unique id. The first paragraph is having id as html and the another one is having id as css.

The title Attribute

The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as explained for id attribute. The behaviour of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading. Example

<!DOCTYPE html>
<html>
   <head>
      <title>The title Attribute Example</title>
   </head>	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>	
</html>

Now try to bring your cursor over “Titled Heading Tag Example” and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.

The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies the class of element. Unlike id attribute, the class attribute can be set for more than two different tags. The same class name can be given to more tags. Multiple HTML elements can share the same class. For example, in the code given below we have used three <div> tags with same class name. If we change the properties of class then all the three <div> tags attributes will get changed.

<body>
<div class="city">
  <h2>Delhi</h2>
  <p>Delhi is the capital of India.</p>
</div>
<div class="city">
  <h2>Shimla</h2>
  <p>Shimla is the capital of Himachal Pradesh.</p>
</div>
<div class="city">
  <h2>Jammu</h2>
  <p>Jammu is the winter capital of Jammu and Kashmir.</p>
</div>
</body>

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>
     <head>
      <title>The style Attribute</title>
    </head>
<body>
<p style = "font-family:verdana; color:#FF0000;">The paragraph is using style tag </p>
</body>	
</html>