Attributes in HTML

Alisha Chhabra
Last Updated: May 13, 2022

Introduction 

Before getting started, we’ve discussed the Elements in HTML in the previous article, which is the prerequisite for today’s topic, i.e., Attributes in HTML.

In general, an attribute is a quality of somebody/something or a feature.

For example, A person’s gender, religion, or other information reflects their personality or conduct. Assume an animal has four legs. From this, one may deduce what kind of animal it is. It may be a dog, a cow, or any other animal with the same qualities. In this case, the attribute is the number of legs, and the value is 4.

Similarly, attributes in HTML can be used to provide additional information about elements.

Attributes in HTML

HTML attributes are special words that offer information about elements. Each element or tag can have attributes that specify how that element behaves.

  • Attributes should be applied inside the start tag at all times.
  • The Attribute’s name and value pair should always be used together.
    • The property you want to change is identified by its name.
    • The value is what you want the value of the property to be set.
  • Since attribute names and values are case sensitive, the W3C recommends writing in lower case only.
  • Multiple attributes can be added to a single HTML element, but there must be a space between them. 
  • Attribute values must always be surrounded by quotation marks. 


In addition, some attributes are necessary for specific elements. For example, a <img> tag must include src and alt attributes.

Syntax:

<element attribute_name="value">content</element>  

 

Let's look at some instances of how the attributes can be used:

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>Using HTML Attributes</title>
 </head>
 <body>
    <!-- Below is the example for src attribute, which provides the image address either picked from the external site or the desktop, height and width are the dimensions attribute that defines the size of the image, alt represents the alternative content if the provided image fails in-display -->


    <p><img src="https://www.icegif.com/wp-content/uploads/icegif-5555.gif" width="300" height="300" alt="Smiley"></p>
    <!-- Below is the example for href attribute, i.e., used for providing the landing page of any website -->


    <p><a href="https://www.codingninjas.com/">Coding Ninjas</a></p>

 </body>
</html>

Output:

In the preceding example, src is an attribute within the <img> tag, and the image path supplied is its value. Similarly, href is an attribute within the <a> tag, and the link given is its value.

Note:- To quote attribute values, both single and double quotes can be used. However, double quotes are the most commonly used. When the attribute value contains double quotes, the value must be enclosed in single quotations, as in value = 'Code "Ninja" Code.'

Now let’s discuss the types of attributes in HTML:

Types of attributes in HTML

Boolean attribute 

In HTML5, some attributes do not consist of name/value pairs but only of the name. These are known as Boolean attributes. Some common Boolean attributes are checked, disabledreadonlyrequired, and so on.

Examples:

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>Using HTML Boolean Attributes</title>
 </head>
 <body>
    <!-- 1. required attribute is used when the user input for a particular element is mandatory -->
  
    <p><input type="email" required></p>
  
    <!-- 2. disabled attribute is used to disable the content means no user interaction is possible -->
  
    <p><input type="submit" value="Submit" disabled></p>
  
    <!-- 3. checked attribute is used to check the checkbox before the user interaction -->
  
    <p><input type="checkbox" checked></p>
  
    <!-- 4. readonly attribute is used when the user is prohibited to modify the content. i.e., it is in read-only mode -->
  
    <p><input type="text" value="Read only text" readonly></p>
 </body>
</html>

Output:

 

General Purpose Attributes

On the majority of HTML elements, you can utilise attributes such as id, title, class, style, and so on. The following section explains how to use them.

1.The id attribute
The id property is used to provide an element with a unique name or identification in a document.
Let's pretend there are two students in the class named Ninja. While taking the role call with their names, the teacher is concerned as there is just one Ninja present in the class. For the sake of convenience, the teacher has come up with the concept of assigning a unique id to each student. In the same manner, the id attribute in HTML works for elements.
This makes the CSS or JavaScript selection of the element much easier

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>HTML id Attribute</title>
    <style>
        #firstName{
            border1px solid red;
        }
        #container{
            background#ccc;
        }
        #infoText{
            color: blue;
        }
    </style>
 </head>
 <body>
    <p><input type="text" id="firstName"></p>
    <div id="container">Some content</div>
    <p id="infoText">This is a paragraph.</p>
 </body>
</html>

Output:

 

An element's id must be unique inside a single page. There can't be two elements with the same id on a single page, and each element can only have one id.


2. The class Attribute
The class attribute is used to identify items, just as the id attribute. Unlike the id attribute, the class attribute does not need document uniqueness. You can apply the same class to many elements in a document, as seen in the following example:

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>HTML class Attribute</title>
    <style>
        .box{
            padding20px;
            border1px solid grey;
        }
        .highlight{
            background: yellow;
        }
    </style>
 </head>
 <body>
    <p><input type="text" class="highlight"></p>
    <div class="box highlight">Some content</div>
    <p class="highlight">This is a paragraph.</p>
 </body>
</html>

Output:

Since a class can be applied to many elements, any style rules specified will be used for all elements with that class.

3. The title attribute
The title attribute is used to give descriptive text about an element's content. To further understand how this works, consider the following example. 

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>HTML title Attribute</title>
 </head>
 <body>
    <!-- When the mouse pointer is over the element, the value of the title property (i.e. title text) is shown as a tooltip by web browsers. -->
    <p><abbr title="World Wide Web Consortium">W3C</abbr><p>

 </body>
</html>

 

Output:

 

4. The style attribute

The style attribute allows you to provide CSS stylistic rules directly within the element, such as colour, font, border, and so on. To illustrate how it works, consider the following example:

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>HTML style Attribute</title>
 </head>
 <body>
    <p style="color: orange;">Ninja is a coder.</p>

    <div style="border: 4px solid red;">Coding Ninjas</div>
 </body>
</html>

 

Output:

 

The list doesn’t end here; there are numerous attributes in HTML that you can use while defining the HTML document.

Frequently asked questions

 

  1. What is the difference between the elements and attributes in HTML?
    Any object that appears on your page is considered an HTML element. In contrast, an attribute offers additional information about a certain HTML element.
     
  2. Differentiate between tags vs elements vs attributes in HTML.
    HTML tags are used to keep the HTML element in place.
    HTML elements hold the content.
    HTML attributes are used to specify the properties of an HTML element in depth.
     
  3. What are the three types of attributes in HTML?
    HTML attributes are divided into four categories: required attributes, optional attributes, standard attributes, and event attributes: The required and optional attributes are often used to change particular HTML elements.

Key takeaways

To recap, we examined HTML attributes in HTML followed by its most often used kinds. The list does not end here; several more attributes can be used to modify the elements of an HTML document.

Continue reading the fantastic articles to improve your programming expertise in all areas. 

Enroll in our top-tier courses taught by the best faculty to unleash the potential of learning.

Happy Leaning Ninja!

Was this article helpful ?
3 upvotes

Comments

No comments yet

Be the first to share what you think