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.

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 −

In this example, href is the attribute name and “https://www.codescompiler.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 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 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.

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

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

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

On executing the above example, it will display the text “Welcome to CodesCompiler…” 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 −

Example

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

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

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.

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.codescompiler.com/html/html_overview.htm">
   HTML Introduction
<a>

<!-- Bad Practice -->
<a href=https://www.codescompiler.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'"
    CodesCompiler

p title='We are known for "Simple Easy Learning"'
    CodesCompiler