html

HTML Attributes

The HTML elements/tags can have some attributes that provide additional properties to HTML elements. These attributes describe the different characteristics of HTML elements like the “style” attribute used to set the style of HTML elements. The attributes are defined in the starting tag and their values are always specified in the double quotations followed by the tag name and “equal to” sign.

This article will provide a thorough overview of the HTML attributes that will help the user to understand the importance of HTML attributes in web development. For this purpose, we will implement some of the major attributes of the HTML elements and have a better understanding.

There are some attributes that are utilized frequently on most of the elements such as id, title, style, and class. These attributes are commonly known as the core attributes. We will discuss them one by one and afterward, we will cover some more attributes that provide crucial properties to the HTML elements.

id attribute in HTML

id attribute provides uniqueness to any HTML element. For example, we have two HTML elements with a similar name then we can identify or differentiate these elements based on the id attribute.

<html>

  <body>


    <h2 id="First">id Attribute 1 </h2>

    <h2 id="Second">id Attribute 2 </h2>


    <style>

        #First {

          background-color: darkcyan;

          font-style: italic;

        }

        #Second {

          background-color: darkgoldenrod;

          font-style: normal;

        }

    </style>

  </body>

</html>

In this example we want to create two headings with different styles. We can do this by assigning different “ids” to the elements. The above code will provide the following output:

title attribute in HTML

The title attribute provides a specific title to the HTML element. However, its behavior relies on the element that is holding the “title” attribute. Most of the time it works as a tooltip, which means whenever someone moves the cursor over that element it will display the value of the title attribute as a tooltip.

<p title="Title attribute">This is HTML Attribute</p>

The below given output will verify that when we move the cursor over the element it shows the value of the title attribute:

style attribute in HTML

Style attribute provides characteristics like color, font size, border, etc to any HTML element:

<p style="color: green; background-color: blanchedalmond;">HTML Attributes</p>

In this example, we created a paragraph element and assign it some attributes. As a result, it will provide the following output:

class Attribute in HTML

The class attribute is utilized to define a class for a single or multiple HTML elements. It refers to the class name in style sheets.

In this example, we created two HTML elements and use the class attribute in them. Both the elements will carry the same style as defined in the class:

<html>

  <body>


    <div class="data">

      <h2>Employee 1</h2>

      <p>First Employee lives in UK</p>

    </div>


    <div class="data">

      <h2>Employee 2</h2>

      <p>Second Employee lives in USA</p>

    </div>

    <style>

       .data {

         background-color: gold;

         font-style: italic;

         font-size: larger;

       }

    </style>

  </body>

</html>

As both the HTML elements are accessing the same class so both elements will follow the same style and the resultant output will be:

src Attribute in HTML

One of the most used HTML attributes is the “src” attribute it carries the link of a source image. This link can be either an absolute link or a relative link.

The term absolute link refers to URL of an online placed image while relative link refers to the image path placed locally.

For example, if a user wants to embed an image on a page then he will utilize the <img>tag. But it wouldn’t be enough, we need to add the path of that image as well.

Now consider the following code to figure out how the src attribute will be embedded with the image tag:

<img src="../img/John.png">

In the above HTML code, the image name along with its path is assigned to the src tag.

alt Attribute in HTML

The term alt stands for alternate. This is used in the <img>element as an attribute. An attribute that will provide an alternate text for the image if the image doesn’t load properly for any reason.

<img src="John.png" alt="This is John's Pic">

Now it will display an alternate message if the “john.png” file doesn’t load for any reason as shown in the following snippet:

lang attribute in HTML

The <html>element takes a lang attribute which determines the language of the web page. This attribute facilitates the search engines in finding the language-specific web pages:

<html lang="fr">

The above code specifies the French language for the web page.

href Attribute in HTML

href stands for the hypertext reference and it is utilized to add the URL of any webpage. It is utilized within the <a>tag:

<a href="https://linuxhint.com/">Welcome to Linuxhint</a>

In the output, it will generate a link as shown in the below snippet:

Clicking the above link will lead us to a website as shown in the following output:

Conclusion

HTML attributes define some additional characteristics for the HTML elements. The purpose of using the attributes with different HTML elements is to design a brighter, clearer, and well-formatted webpage.

This article offers a detailed picture of HTML attributes. Starting half of this article covers the core attributes where we discuss how to use id, title, style, and class attributes in HTML elements. While the latter half provides some well-known attributes where we figured out how to use src and alt attributes while embedding any image with the webpage.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.