HTML Attributes

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

HTML attributes are essential components of HTML elements. They provide additional information and define the behavior of elements on a web page. These attributes modify the default properties of elements. They allow developers to customize their appearance, functionality, and interactions. Attributes are specified within the opening tag of an HTML element and are composed of a name and a value, separated by an equals sign.

This article will discuss the HTML Attributes and their types with an example of each.

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.

Implementation

HTML

HTML

<!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

Components of Attribute

Component	Description	Example
Name	The name of the attribute, defining its purpose.	href, src, alt
Value	The value assigned to the attribute, specifying its detail or behavior.	https://example.com, image.jpg, An image
Syntax	The attribute is specified within the opening tag in the format name="value".	<a href="https://example.com">, <img src="image.jpg" alt="An image">

Meta Tag Attributes

Attribute	Description	Example
name	Specifies the name of the meta information.	name="description"
content	Provides the value of the meta information.	content="A brief description of the page"
http-equiv	Provides an HTTP header for the meta tag.	http-equiv="Content-Type"
charset	Specifies the character encoding for the document.	charset="UTF-8"

HTML Global Attributes

Attribute	Description	Example
id	Provides a unique identifier for the element.	id="header"
class	Assigns one or more class names to the element.	class="button primary"
style	Applies inline CSS styles to the element.	style="color: red;"
title	Provides additional information as a tooltip.	title="Click here"
data-*	Allows custom data attributes for storing extra information.	data-role="admin"

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

HTML

HTML

<!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.

HTML 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.

HTML

HTML

<!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

HTML 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.

HTML

HTML

<!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

HTML 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.

HTML

HTML

<!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

HTML 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.

HTML

HTML

<!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

HTML src Attribute

The src attribute in HTML specifies the source URL of an external resource such as an image, video, or script. It tells the browser where to find the file that should be loaded or displayed. This attribute is used with elements like <img>, <script>, and <iframe>. The src attribute must contain a valid URL or path to the resource.

Example:

<img src="img.jpg" alt="A image">
<script src="script.js"></script>
<iframe src="https://example.com"></iframe>

In this example:

The <img> tag uses src to specify the image file.
The <script> tag uses src to include an external JavaScript file.
The <iframe> tag uses src to embed another web page.

HTML alt Attribute

The alt attribute provides alternative text for an image if it cannot be displayed. It is used with the <img> tag to describe the image content. This attribute improves accessibility and SEO by giving context to users who use screen readers or if the image fails to load.

Example:

<img src="logo.png" alt="Company Website logo">

In this example:

The alt attribute describes the image as "Company Website logo," which will be read by screen readers or displayed if the image cannot be loaded.

HTML width and height Attribute

The width and height attributes specify the dimensions of an element, typically used with images and videos. These attributes set the size of the element in pixels, allowing you to control how it appears on the page.

Example:

<img src="banner.jpg" alt="Banner img" width="600" height="400">

In this example:

The width attribute sets the image width to 600 pixels.
The height attribute sets the image height to 400 pixels.

HTML href Attribute

The href attribute specifies the URL of the page or resource that a link should navigate to. It is used with the <a> (anchor) tag to create hyperlinks. The value of href determines the destination of the link when clicked.

Example:

<a href="https://www.exampleofhref.com">Visit Example</a>

In this example:

The href attribute specifies that the link should navigate to "https://www.exampleofhref.com" when clicked.

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 HTML Attributes 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 articles on Code360 for enhancing your skill sets further.