Attributes in HTML

Q: What is the use of the alt attribute?

The alt attribute stands for “alternative text.” It specifies the alternative text that is displayed if the image cannot be displayed. It is very useful in cases when the image doesn’t load or there is some restriction to the reader from accessing the page.

Q: What are the custom attributes in HTML?

The attributes that are not part of the official HTML specification but are used by developers to store custom data on an element are known as custom attributes. They are created using a data-name prefix, where the name can be anything you choose.

Q: List some attributes of tag.

The img tag embeds an image in an HTML document. Some attributes of the img tag are: src, alt, title, class, and id.

Introduction

Hello Ninjas! You must be familiar with the Elements in HTML. It is a prerequisite for today’s article, i.e., Attributes in HTML. The attribute is a quality of somebody/something or a feature. For example, A person’s lifestyle and behavior reflect their personality or conduct. Just like an animal, assume a dog has certain attributes, like a number of legs that are four in the same way; attributes in HTML can be used to provide additional information about elements.

This article will discuss the attributes in HTML and their types with an example of each. So let's start by first learning the 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. Here is an example of an element with an attribute:

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

Some important points regarding attributes are:

Attributes should be applied inside the start tag at all times. Some attributes are necessary for specific elements. For example, a <img> tag must include src and alt attributes.
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 represents what you want the value of the property to be set.
Since attribute names and values are case-sensitive, the W3C recommends writing in lowercase 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.

Syntax

The syntax for writing the attribute’s name and value is shown below:

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

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

Example

Let's look at some instances of how the attributes can be used. In the below 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.

Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.url{
			font-size: larger;
			display: block;
			padding-top: 10px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<img src="http://www.codingninjas.com/blog/wp-content/uploads/2020/04/LOGO-05.png" width="400" height="auto" alt="logo">
	<a href="https://www.codingninjas.com/" class="url">Coding Ninjas</a>
</body>
</html>

Output

Types of attributes in HTML

Let’s discuss one by one the types of attributes in HTML with examples.

Boolean attribute

In HTML, a boolean attribute is an attribute with no value. They do not consist of name/value pairs but only of the name. The presence of the attribute itself indicates that the attribute is "true," and the absence of the attribute indicates that the attribute is "false." Some common Boolean attributes are checked, disabled, readonly, required, and so on.

Note: <input readonly>, <input readonly = "true">, <input readonly=" ">, or <input readonly="xyz"> all indicates that the attribute is true. If we don’t write readonly then only it is false.

Example

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Using HTML Boolean Attributes</title>
</head>

<body>
	<form>
		<!-- required attribute is used when the 
		user input for a particular element is mandatory 
		-->
		<p><input type="email" required></p>

		<!-- disabled attribute is used to disable the content 
		means no user interaction is possible 
		-->
		<p><input type="submit" value="Submit" disabled></p>

		<!-- checked attribute is used to 
		check the checkbox before the interaction 
		-->
		<p><input type="checkbox" checked></p>

		<!-- readonly attribute is used when the 
		user is prohibited from modifying the content
		i.e., it is in read-only mode
		-->
		<p><input type="text" value="Read only text" readonly></p>
	</form>
</body>

</html>

Output

General Purpose Attributes

The general purpose attributes are attributes that can be used with any element and are not specific to a particular element or type of element. On the majority of HTML elements, you can utilize attributes such as id, title, class, style, and so on. Let’s discuss them one by one.

The id attribute

The id attribute is used to provide an element with a unique name or identification in a document. The id attribute can be used to style the element using CSS or to access it using JavaScript. 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.

Example

We use multiple div in our document. The common styles can be justified using a div tag only. But let’s suppose we want to customize them differently. We can provide them id which can be used to style them differently.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>HTML id Attribute</title>
	<style>
		div{
			height: 150px;
			width: 150px;
			margin: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		/* We can customize them separately  by providing id's  */
		#div1{
			background-color: rgb(62, 146, 255);
		}
		#div2{
			background-color: rgba(250, 100, 0, 0.795);
		}
		section{
			width: 500px;
			display: flex;
		}
	</style>
</head>
<body>
	<section>
		<div id="div1">
			<h4>Coding</h4>
		</div>
		<div id="div2">
			<h4>Ninjas</h4>
		</div>
	</section>
</body>
</html>

Output

The class Attribute

The class attribute is used to identify items, just like 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.

Example

Let’s suppose we have a heading and an image. We want to apply the same border on both elements. We can do this by providing the same class to both elements and styling them using the class name.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 300px;
		}
		.url{
			font-size: larger;
			display: block;
			padding-top: 10px;
			width:300;
		}
		.style1{
			border: 2px solid black;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div>
		<h2 class="style1">Coding Ninjas</h2>
		<img src="http://www.codingninjas.com/blog/wp-content/uploads/2020/04/LOGO05.png" class="style1" width="300" height="auto" alt="logo">
	</div>
</body>
</html>

Output

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. One should use it to provide additional context and information for users.

Example

We have provided the attribute title to an URL. Whenever we hover the mouse over the element, the value of the title property is shown as a tooltip by web browsers.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>HTML title Attribute</title>
</head>
<body>
	<!-- When we take the mouse pointer on the element,
	the value of the title property (i.e., title text)
	is shown as a tooltip by web browsers. 
	-->
	<a href="/about" title="Learn more about this">About</a>
</body>
</html>

Output

The style attribute

The style attribute allows you to provide CSS stylistic rules directly within the element, such as color, font, border, and so on. It is commonly used to override styles that have been defined in a stylesheet.

Example

We have taken six div with the same color. We can override the color by providing an inline style using this attribute.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
	<style>
		section{
			width: 400px;
			display: flex;
			height: 200px;
			flex-wrap: wrap;
		}
		div{
			margin: 10px;
			background-color: aqua;
		}
	</style>
</head>
<body>
	<section>
		<div style= "width: 100px; height:100px;"></div>
		<div style="background-color:rgb(223, 61, 255); width: 100px; height:100px;"></div>
		<div style="width: 100px; height:100px;"></div>
		<div style="background-color:rgb(223, 61, 255); width: 100px; height:100px;"></div>
		<div style="width: 100px; height:100px;"></div>
		<div style="background-color:rgb(223, 61, 255); width: 100px; height:100px;"></div>
	</section>
</body>
</html>

Output

Frequently Asked Questions

How are elements different from attributes in HTML?

Any object that appears on your page is considered an HTML element. They are used to describe the structure and content of a document, like <div> element represents a section in the document. In contrast, an attribute offers additional information about a certain HTML element.

What are tags in HTML?

In HTML, tags are the markup elements used to define the structure of a webpage. The elements are the building blocks of a webpage. They contain the content of the webpage. Attributes are used to provide additional information about an element.

What is the use of the alt attribute?

The alt attribute stands for "alternative text." It specifies the alternative text that is displayed if the image cannot be displayed. It is very useful in cases when the image doesn’t load or there is some restriction to the reader from accessing the page.

What are the custom attributes in HTML?

Custom attributes are not part of the official HTML specification but are used by developers to store custom data. They are created using a data-name prefix, where the name can be anything you choose.

What are some attributes of <img> tag?

The img tag embeds an image in an HTML document. Some attributes of the img tag are: src, alt, title, class, and id.

Conclusion

In the article, we have learned about Attributes in HTML followed by its most often-used kinds. We have also seen examples of the same. The list does not end here; several more attributes can be used to modify the elements of an HTML document. You can explore them yourself. To learn more about HTML, you can check out our other blogs:

You may refer to our Guided Path on Code Studios for enhancing your skill set on DSA, Competitive Programming, System Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy Learning, Ninjas!

Attributes in HTML

Introduction