Apart from elements, attributes also play an important role in the HTML document. In this article, we will learn about HTML attributes in detail along with examples.
HTML Attributes
HTML attributes are used to add additional information or characteristics to the HTML elements. Attributes are always defined inside the start tag in the name-value pair. Almost all elements have attributes.
Syntax:
<element attributeName = "value">My data </element>
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YumYumCart</title>
</head>
<body>
<h1> Welcome to YumYumCart</h1>
<h2>About Us</h2>
<p>YumYumCart is an online store of YumYum food chain. It helps people to order their favorite food online.We provide variety of delicious food.</p>
<p>YumYum Outlets</p>
<ol>
<li title="Dilevery available only for South Delhi">Delhi</li>
<li title="Dilevery available for all places">Mumbai</li>
<li>Jaipur</li>
<li>Pune</li>
</ol>
</body>
</html>
Output:
Important Facts About HTML Attributes
The following are the important facts about HTML attributes:
1. The attribute name-value pair is case-insensitive, which means you can write them in lower or uppercase like SRC or src. But the better we recommend you write the name-value pair in lowercase.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First HTML Program</title>
</head>
<body>
<h1>HTML Document </h1>
<hr>
<!-- Use uppercase attribute -->
<p TITLE = "LEARN ATTRIBUTE">Here we learn about <mark>HTML Attributes<mark></p>
<!-- Use lowercase attribute -->
<p title = "Learn attributes">Here we learn about HTML Attributes</p>
</body>
</html>
Output:
2. It is not necessary to always write the value in between double quotes, you can write the value without double quotes, such as <p title = "Mytag"> and <p title = Mytag> both work perfectly fine. But we still recommend you should use double quotes around the value because sometimes the value of the attribute contains spaces, so if you do not use double quotes, then you will not get the correct output.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First HTML Program</title>
</head>
<body>
<h1>HTML Document </h1>
<hr>
<!-- Use double quotes -->
<p title = "LEARN ATTRIBUTE">Here we learn about <mark>HTML Attributes<mark></p>
<!-- Without using double quotes-->
<p title = Learn attributes>Here we learn about HTML Attributes</p>
</body>
</html>
Output: Here we display two statements and use two attributes, so in the first attribute we use double quotes so in output when we move the mouse over the statement we will get a message "LEARN ATTRIBUTE". Whereas in the second attribute of the second statement we don't use double quotes, so when we move the mouse over the statement we will get a message "Learn". Because HTML treated "Learn" as a value of the title attribute and "attributes" as another attribute due to the space between them.
3. You are allowed to add multiple attributes in a single element and they are separated by space.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First HTML Program</title>
</head>
<body>
<h1>HTML Document </h1>
<hr>
<!-- Use multiple attributes -->
<p title = "LEARN ATTRIBUTE" style="color:pink;">Here we learn about <mark>HTML Attributes<mark></p>
</body>
</html>
Output: Here we use two attributes that are title and style in the <p> element. Here both attributes are separated by space.
Commonly Used Attributes
The following are the commonly used attributes in HTML:
1. href Attribute
This attribute is used with <a> element. The <a> element is used for hyperlinks and href attribute is used to define the URL link of the page that you want to link to your current webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First HTML Program</title>
</head>
<body>
<h1>Learn HTML </h1>
<hr>
To Learn HTML <a href="https://www.w3grads.com/"> visit W3Grads</a>
</body>
</html>
Output:
2. src Attribute
This attribute is used with <img> element. The <img> element is used to add an image and the src attribute is used to define the path of the image that is going to display on the webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First HTML Program</title>
</head>
<body>
<h1>Welcome to W3Grads </h1>
<hr>
<h2>It is learning platform. Where you can learn programming languages. </h2>
<hr>
<img src="dd.jpg">
</body>
</html>
Output:
3. style Attribute
This attribute is used to add styles to the elements like color, font, and more.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First HTML Program</title>
</head>
<body>
<h1>HTML Document </h1>
<hr>
<p style="color: green;">Here we learn about HTML Attributes</p>
</body>
</html>
Output:
4. lang Attribute
This attribute is used inside <HTML>element. It is used to declare the language of the webpage. In the value of the lang attribute, the first two characters represent the language and the last two characters represent the country. Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First HTML Program</title>
</head>
<body>
<h1>Learn HTML </h1>
<hr>
To Learn HTML <a href="https://www.w3grads.com/"> visit W3Grads</a>
</body>
</html>
Output:
5. title Attribute
This attribute is used to add extra information about an element. The value of this attribute is displayed when you move the mouse over the text. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First HTML Program</title>
</head>
<body>
<h1>HTML Document </h1>
<hr>
<p title = "Learn attributes">Here we learn about HTML Attributes</p>
</body>
</html>
