Attributes In HTML
On the left side, we have paragraphs without attributes. On the right side, we have a paragraph with class
attribute and title attribute.
<style>
.my-para{
background-color: #f4eacb;
padding:14px;
color: #c44b4b;
font-family: monospace;
}
</style>
<div class="container">
<p>This is a paragraph without attributes.</p>
<p class="my-para" title="Title of paragraph">This is a paragraph with class
attribute and title attribute.</p>
</div>
Output:
This is a paragraph without attributes.
This is a paragraph with class attribute and title attribute.
We can see how adding just an attribute can drastically change the look and feel of the HTML element.
What is HTML Attribute?
HTML attribute is a property of an HTML element that can be used to add extra functionality to an
element.
HTML attribute is used as a key-value pair. For example, the class attribute is a key and my-para is a
value. Written as class="my-para".
<p class="my-para">This is a paragraph with class attribute.</p>
Some HTML attributes are compulsory while some are optional.
The compulsory attributes are necessary to use without it element won't work whereas using optional
attributes depends on where need for use.
For example
src attribute is compulsory for the <img> tag and will not work without it. Whereas alt attribute is optional
and will work without it.
<!-- src is compulsory to use
alt attribute is optional -->
<img src="cat.jpg" alt="cat image">
Properties Of HTML Attribute
The HTML attribute has 2 properties name and value.
1. name - It is the key of attribute and is always in lowercase.
2. value - It is the second part of the attribute. It specifies the value of the attribute.
Syntax
<tag name="value">Content</tag>
The above syntax is used to add attributes to the HTML element.
Example of adding style and title attributes to the HTML element.
Example
<!-- 2 attributes added in paragraph below -->
<p style="color:red" title="a paragraph">This paragraph is Red.</p>
Core Attributes In HTML
There are some core attributes in HTML that can be used with most of the HTML elements. These
attributes are:
1. style attribute
2. class attribute
3. id attribute
4. title attribute
1. HTML style attribute
The style attribute in HTML is used to define inline CSS in our element. We can specify CSS rules directly
within the element using the style attribute.
To use the style attribute on an element, we need to add the attribute to the element where style is key
and CSS rules separated by commas enclosed in quotes are values.
For example, to add the style attribute to a paragraph, we need to add
the style="color:red" attribute to the paragraph.
Example
<body style="background: steelblue;">
<h2 style="font-size:40px;">Heading of the page</h2>
<p style="color:yellow">This is a paragraph.</p>
</body>
Output:
2. HTML class attribute
The class attribute can be used with almost all HTML elements.
Class in CSS is used to create a set of CSS rules that can be applied to a group of elements.
When a CSS class is added in any HTML element then all CSS rule sets are applied to that element that
is mentioned in the class.
Example
<style>
.box{
background: skyblue;
font-family: sans-serif;
padding:10px;
}
</style>
<p class="box">Setting 'box' class to the element.</p>
Same class can be applied to multiple elements. This is the purpose of using a class attribute in HTML.
This way we need to define CSS rules set only once and can be applied to multiple elements.
An HTML element can also have more than 1 class. Multiple classes in HTML are separated by space.
<style>
.box{
background: skyblue;
font-family: sans-serif;
padding:10px;
}
.bar{border:1px solid black }
</style>
<p class="box bar">Setting 'box' and 'bar' class to the element.</p>
3. HTML id attribute
The id attribute is used to uniquely identify any HTML element .
An HTML document can't have more than 1 same id. Each and every id should be unique.
The id attribute can be used by CSS to style the element and is used by javascript.
Example
<style>
#id1{
color: brown;
font-family: sans-serif;
background-color: bisque;
}
</style>
<p id="id1">Setting 'id1' id to the element.</p>
4. HTML title attribute
The title attribute can be used on almost any element in the document. The title attribute is used to
describe the element. When we hover over the element then the title attribute will be displayed as a
tooltip.
Example
<p title="This is title">Hover mouse over me.</p>
Other useful HTML attributes
Apart from core attributes, there are other useful attributes that are used with other HTML elements.
href Attribute
The href attribute is used to link to another page or another web address. It is used in a tag.
It provides a URL to the link.
Example
<a href="https://www.misinfotech.com">Home Page</a>
src Attribute
src attribute is used to define file location. It accepts the URL of the resource. It is used
with <img> , <iframe>, <audio>, <video>, etc.
Example
<img src="assets/flowers.jpg">
<script src="test.js"></script>
alt Attribute
The alt attribute is added as an alternate text in a <img> tag. It holds a description of the image.
The text provided in the alt attribute is shown when the image is not loaded due to the unavailability of an
image or some error. It is not mandatory to use alt attributes but is incredibly useful for accessibility.
Example
<p>image below does not exist so alt text is printed.</p>
<img src="image.jpg" alt="this is an image">
HTML Attribute List
Here is the list of common HTML attributes:
Attribute Used in Description
alt <img> Description of the image
src <img> URL of the image
width <img> Width of the image
height <img> Height of the image
href <a> URL of the link
target <a> Target of the link
rel <a> Relation of the link
lang html Language of the text
style Almost all elements Style of the element
class Almost all elements Class of the element
id Almost all elements Id of the element
title Almost all elements Title of the element
dir Almost all elements Direction of the text
colspan <td> Number of columns to span
rowspan <td> Number of rows to span
for <label> For which element the label is
placeholder <input> Placeholder of the input
autofocus <input> Focus the input
required <input> Input is required
checked <input> Input is checked
disabled <input> Input is disabled
readonly <input> Input is readonly
max <input> Maximum value of the input
min <input> Minimum value of the input
action <form> Action of the form
method <form> Method of the form
Points to remember:
i. HTML attribute gives additional information to the element which can be used later.
ii. HTML attributes are only defined in starting tag.
iii. An element can have more than one attribute.
iv. All HTML element has 4 core attribute: title, style, id, and class.
v. The href attribute in <a> tag specifies the URL of the page link goes to.
vi. The alt attribute in the <img> tag specifies the alternate text to the image.
