HTML - Attributes

Quiz

We have seen a few HTML tags and their usage, like heading tags <h1>, <h2>, paragraph tags <p>, and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.

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.
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. Here, we are using the align attribute with different paragraph elements−

<!DOCTYPE html>
<html>

<head>
    <title>Example of HTML Attributes</title>
</head>

<body>
    <p align="left">Left Aligned</p>
    <p align="center">Center Aligned</p>
    <p align="right">Right Aligned</p>
</body>

</html>

HTML Core Attributes

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

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

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

<!DOCTYPE html>
<html>
<head>
   <title>The style Attribute</title>
</head>
<body>
   <p style="font-family:arial; color:#FF0000;">Welcome to Tutorialspoint...</p>
</body>
</html>

On executing the above example, it will display the text "Welcome to Tutorialspoint..." in the "Arial" font and with a red color.

HTML Internationalization 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
1	ltr Left to right (the default value)
2	rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)

S.No

Value & Meaning

ltr

Left to right (the default value)

rtl

Right to left (for languages such as Hebrew or Arabic that are read right to left)

Example

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

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

<!DOCTYPE html>
<html lang="en">
<head>
   <title>English Language Page</title>
</head>
<body>
   This page is using English Language
</body>
</html>

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 –

disabled
readonly
required
inert
autocomplete

Example

Here is an example of an HTML Boolean attribute (required) −

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

HTML Generic Attributes

Here's a table of some other attributes that are readily usable with many of the HTML tags.

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places a background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	"Pop-up" title of the elements.

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>

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

Print Page