Page 1 of 11
Home Whiteboard Online Compilers Practice Articles Jobs Tools
SQL HTML CSS Javascript Python Java C C++ PHP Scala C#
What Are HTML Attributes?
Every HTML tag can be modified by attributes. Think of attributes as extra information
you give to an element to change how it behaves or appears. This guide explains the
most common attributes you will use every day.
What are HTML Attributes?
HTML attributes are special words that provide additional information to an HTML
element. Attributes are placed inside the element's opening tag, and they are used to
configure or adjust the element's behavior. All attributes are made up of two parts: a
name and a value −
Name: The attribute name is the keyword, also known as the attribute identifier,
which defines a specific characteristic for the element in which it is using. For
example, the paragraph <p> element (in the below-given example) has an
attribute "align", which defines the alignment of the paragraph on the page.
Value: The attribute value is the data or information that defines the value to be
set for that attribute. The value is assigned within the double quotes. For example,
"left", "center", or "right" can be assigned to the "align" attribute with the
paragraph tag (as shown in the below example).
Below is the syntax of an element HTML having attribute −
<tag_name attribute="Value">...</tag_name>
Rules and Characteristics
The following are the rules and characteristics of HTML attributes; you should follow
while using attributes with HTML elements:
Attributes are optional; you can use them to provide additional information about
an HTML element.
https://www.tutorialspoint.com/html/html_attributes.htm 1/11
Page 2 of 11
Attributes have name and value pairs, but some of the attributes do not require
any value; those are known as Boolean attributes.
An HTML element can have multiple attributes, and they should be separated by
spaces.
Attributes should always be written with the opening tag.
All HTML elements can have attributes except a few like <head>, <title>,
<script>, etc.
W3C recommends using attributes in lowercase and keeping the value in quotes.
Example of HTML Attributes
This example demonstrates the use of attributes with HTML elements −
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Attributes</title>
</head>
<body>
<a href="https://www.tutorialspoint.com">Visit our homepage</a>
</body>
</html>
In this example, href is the attribute name and "https://www.tutorialspoint.com" is
the attribute value.
Core Attributes Every Element Can Use
The four core attributes that can be used on the majority of HTML elements (although
not all) are −
The id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an
HTML page. There are two primary reasons that you might want to use an id attribute on
https://www.tutorialspoint.com/html/html_attributes.htm 2/11
Page 3 of 11
an element −
If an element carries an id attribute as a unique identifier, it is possible to identify
just that element and its content.
If you have two elements of the same name within a Web page (or style sheet),
you can use the id attribute to distinguish between elements that have the same
name.
We are using the id attribute to distinguish between two paragraph elements −
Example
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>ID Attribute Example</title>
</head>
<body>
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
</body>
</html>
The title Attribute
The title attribute gives a suggested title for the element. The syntax for the title
attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it, although it is
often displayed as a tooltip when the cursor comes over the element or while the
element is loading.
Example
Open Compiler
<!DOCTYPE html>
<html>
https://www.tutorialspoint.com/html/html_attributes.htm 3/11
Page 4 of 11
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
On executing the above example, it will display the heading "Titled Heading Tag
Example". If you bring your cursor over it, you will see that whatever title you used in
your code is coming out as a tooltip of the cursor.
The class Attribute
The class attribute specifies one or more CSS classes for an HTML element. Multiple
classes can be used on a single element with this attribute. The value of this attribute is
a space-separated list of class names if you are specifying multiple classes.
Example
class="className1 className2 className3"
The style Attribute
The style attribute allows you to write inline CSS rules for an element.
Example
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Welcome to Tutorialspoint...
</p>
https://www.tutorialspoint.com/html/html_attributes.htm 4/11
Page 5 of 11
</body>
</html>
On executing the above example, it will display the text "Welcome to Tutorialspoint..." in
the "Arial" font and with a red color.
Internationalization (i18n) Attributes
There are three internationalization attributes, which are available for most (although not
all) XHTML elements.
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in which the
text should flow. The dir attribute can take one of two values, as you can see in the
table that follows −
S.No Value & Meaning
ltr
1
Left to right (the default value)
rtl
2
Right to left (for languages such as Hebrew or Arabic that are read right to left)
Example
Open Compiler
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
If you click on Edit & Run, you can observe the text aligned to right.
https://www.tutorialspoint.com/html/html_attributes.htm 5/11
Page 6 of 11
When dir attribute is used within the <html> tag, it determines how text will be
presented within the entire document. When used within another tag, it controls the
text's direction for just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this
attribute was kept in HTML only for backwards compatibility with earlier versions of
HTML. This attribute has been replaced by the xml:lang attribute in new XHTML
documents.
The values of the lang attribute are ISO-639 standard two-character language codes.
Check HTML Language Codes: ISO 639 for a complete list of language codes.
Example
Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
Boolean Attributes
Boolean attributes represent true and false values and do not require any value with the
attribute name. To set the true value, you need to write the attribute's name, and to set
it false, the attribute should be omitted altogether.
Here are some Boolean attributes –
https://www.tutorialspoint.com/html/html_attributes.htm 6/11
Page 7 of 11
disabled
readonly
required
inert
autocomplete
Example
Here is an example of an HTML Boolean attribute (required) −
Open Compiler
<!DOCTYPE html>
<html>
<body>
<h1>Example of "required" attribute</h1>
<form>
<label for="user_name">Input User Name:</label>
<input type="text" id="user_name" name="user_name" required>
<input type="submit">
</form>
</body>
</html>
The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the
xml:lang attribute should be an ISO-639 country code, as mentioned in the previous
section.
Generic Attributes
Here's a table of some other attributes that are readily usable with many of the HTML
tags.
Attribute Options Function
https://www.tutorialspoint.com/html/html_attributes.htm 7/11
Page 8 of 11
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
numeric, hexidecimal,
bgcolor Places a background color behind an element
RGB values
background URL Places a background image behind an element
Names an element for use with Cascading
id User Defined
Style Sheets.
Classifies an element for use with Cascading
class User Defined
Style Sheets.
Specifies the width of tables, images, or table
width Numeric Value
cells.
Specifies the height of tables, images, or table
height Numeric Value
cells.
title User Defined "Pop-up" title of the elements.
Specifies the destination URL for a link or
href User Defined
reference.
Specifies the source file for media elements
src User Defined
like <img>, <audio>, or <iframe>.
We will see related examples as we proceed to study other HTML tags. For a complete
list of HTML tags and related attributes, visit: HTML Tags Reference and HTML Attributes
Reference.
Best Practices for Using HTML Attributes
There are certain practices you should follow to use attributes on any element, please
check the below-mentioned ways to do so:
1. Write Values in Quotes
You should always write the attribute values in single or double quotes.
<!-- Good Practice -->
<a href="https://www.tutorialspoint.com/html/html_overview.htm">
HTML Introduction
<a>
https://www.tutorialspoint.com/html/html_attributes.htm 8/11
Page 9 of 11
<!-- Bad Practice -->
<a href=https://www.tutorialspoint.com/html/html_overview.htm>
HTML Introduction
<a>
2. Use Lowercase
HTML is case-insensitive, but the good practice is to write the HTML attribute in
lowercase.
<input type="text">
3. Use of Single and Double Quotes Together
When you need to provide any string in quotes as the value of an attribute, you can use
the combination of single and double quotes.
<!-- Can use single and double Quotes -->
<p title="We are known for 'Simple Easy Learning'">
Tutorialspoint
</p>
<p title='We are known for "Simple Easy Learning"'>
Tutorialspoint
</p>
TOP TUTORIALS
Python Tutorial
Java Tutorial
C++ Tutorial
C Programming Tutorial
C# Tutorial
PHP Tutorial
R Tutorial
HTML Tutorial
CSS Tutorial
https://www.tutorialspoint.com/html/html_attributes.htm 9/11
Page 10 of 11
JavaScript Tutorial
SQL Tutorial
TRENDING TECHNOLOGIES
Cloud Computing Tutorial
Amazon Web Services Tutorial
Microsoft Azure Tutorial
Git Tutorial
Ethical Hacking Tutorial
Docker Tutorial
Kubernetes Tutorial
DSA Tutorial
Spring Boot Tutorial
SDLC Tutorial
Unix Tutorial
CERTIFICATIONS
Business Analytics Certification
Java & Spring Boot Advanced Certification
Data Science Advanced Certification
Cloud Computing And DevOps
Advanced Certification In Business Analytics
Artificial Intelligence And Machine Learning
DevOps Certification
Game Development Certification
Front-End Developer Certification
AWS Certification Training
Python Programming Certification
COMPILERS & EDITORS
Online Java Compiler
Online Python Compiler
Online Go Compiler
Online C Compiler
Online C++ Compiler
Online C# Compiler
https://www.tutorialspoint.com/html/html_attributes.htm 10/11
Page 11 of 11
Online PHP Compiler
Online MATLAB Compiler
Online Bash Terminal
Online SQL Compiler
Online Html Editor
ABOUT US | OUR TEAM | CAREERS | JOBS | CONTACT US | TERMS OF USE |
PRIVACY POLICY | REFUND POLICY | COOKIES POLICY | FAQ'S
Chapters Categories
Tutorials Point is a leading Ed Tech company striving to provide the best learning material on
technical and non-technical subjects.
© Copyright 2025. All Rights Reserved.
https://www.tutorialspoint.com/html/html_attributes.htm 11/11
