Attributes In HTML

❮ Prev Next ❯

In this tutorial, you will learn everything about HTML attributes. Like what is an attribute, how to use it, how to use it, why do we use it, etc.

Following is an example of paragraphs with and without attributes.

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.

You 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. For example, you can add a class attribute to an element to add a style to it or add a title attribute to create a tooltip when you hover over the 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 your 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.

name - It is the key of attribute and is always in lowercase.
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.

Here is an 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>

▶ Run the code

Core Attributes In HTML

There are some core attributes in HTML that can be used with most of the HTML elements. These attributes are:

style attribute
class attribute
id attribute
title attribute

1. HTML style attribute

The style attribute in HTML is used to define inline CSS in our element. You can specify CSS rules directly within the element using the style attribute.

To use the style attribute on an element, you 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, you 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>

▶ Run the code

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>

▶ Run the code

Output:

Same class can be applied to multiple elements. This is the purpose of using a class attribute in HTML. This way you 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>

Output:

3. HTML id attribute

The id attribute is used to uniquely identify any HTML element within the DOM.

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 to get the element by ID.

Example

<style>
#id1 {
  color: brown;
  font-family: sans-serif;
  background-color: bisque;
}
</style>

<p id="id1">Setting 'id1' id to the element.</p>

▶ Run the code

Output:

Note: Both class and id look the same when used for CSS but you can use a specific class as many times you want on your web page but it can be used only once.

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

▶ Run the code

Output:

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.tutorialstonight.com">Home Page</a>

▶ Run the code

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>

▶ Run the code

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. Screen readers read this to their users.

Example

<p>image below does not exist so alt text is printed.</p>
<img src="image.jpg" alt="this is an image">

▶ Run the code

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

Conclusion

This is the end of a short guide to HTML attributes. We covered almost everything that you need to start using HTML attributes. We have also seen a list of common HTML attributes which will give you a better understanding of the HTML attributes.

Points to remember:

HTML attribute gives additional information to the element which can be used later.
HTML attributes are only defined in starting tag.
An element can have more than one attribute.
All HTML element has 4 core attribute: title, style, id, and class.
The href attribute in <a> tag specifies the URL of the page link goes to.
The alt attribute in the <img> tag specifies the alternate text to the image.

❮ Prev Next ❯