HTML Attributes | Attribute Names, Values & Syntax

Understanding HTML Attributes

HTML attributes provide additional information about an element or specify characteristics that affect its meaning, behavior, or relationship to other resources.

Attributes are written inside an element's start tag and usually consist of a name and a value. Different HTML elements support different attributes, while global attributes can be used with most HTML elements.

HTML Attribute Syntax

Attributes are written inside an element's start tag after the element name. Most attributes consist of an attribute name followed by an equals sign (=) and an attribute value.

For example, the href attribute specifies the destination of a hyperlink:

<a href="about.html">About Us</a>

The start tag can be broken into several parts:

<a href="about.html">
 ↑    ↑       ↑
tag  name    value
name

In this example, a identifies the element, href is the attribute name, and about.html is the attribute value.

Attribute Names & Values

An attribute name identifies the type of information being provided, while the attribute value supplies the information associated with that attribute.

<a href="contact.html">Contact Us</a>

Here, the href attribute tells the browser that a hyperlink destination is being provided, while contact.html identifies that destination.

Another example is the src attribute of the img element:

<img src="images/photo.jpg" alt="Mountain landscape">

The src value identifies the image resource, while the alt value provides a text alternative for the image.

The meaning and permitted values of an attribute depend on the attribute itself and the element on which it is used.

Multiple Attributes

An HTML element can have more than one attribute when the element supports them. Multiple attributes are placed within the same start tag and separated by whitespace.

<a href="about.html" title="About Our Company">About Us</a>

In this example, the a element contains both href and title attributes.

An element can contain several attributes:

<img src="images/photo.jpg" alt="Mountain landscape" width="600" height="400">

Each attribute provides a different piece of information about the same img element.

Whitespace between attributes is important because it separates one attribute from the next.

Quoting Attribute Values

HTML allows some attribute values to be written without quotation marks, but only when the value meets the requirements for an unquoted attribute value. Using quotation marks consistently avoids those restrictions and makes attribute values easier to recognize.

These tutorials use double quotation marks around attribute values:

<a href="about.html" title="About Us">About Us</a>

Single quotation marks can also be used:

<a href='about.html' title='About Us'>About Us</a>

However, using one quotation style consistently throughout a project makes the markup easier to read and maintain. These tutorials use double quotation marks as the standard convention.

Quotation marks are required when a value contains spaces. For example:

<p class="important message">Please read this message.</p>

Boolean Attributes

Some HTML attributes are boolean attributes. A boolean attribute represents a true or false condition based on whether the attribute is present on the element.

For example, the disabled attribute can disable a form control:

<button disabled>Submit</button>

When the disabled attribute is present, the disabled state is true. When the attribute is absent, the disabled state is false.

A boolean attribute can also be written with an empty value or with its attribute name as its value:

<button disabled>Submit</button>
<button disabled="">Submit</button>
<button disabled="disabled">Submit</button>

These forms represent the same boolean state. For clarity and simplicity, these tutorials generally use the attribute name by itself:

<button disabled>Submit</button>

A value such as disabled="false" does not turn a boolean attribute off. Because the attribute is still present, its boolean state remains true.

Element-Specific Attributes

Many attributes are associated with particular HTML elements or groups of elements. These attributes provide information or functionality related to the purpose of those elements.

For example, the href attribute is commonly used with the a element to specify a hyperlink destination:

<a href="products.html">Products</a>

The src and alt attributes are used with the img element:

<img src="logo.png" alt="Company Logo">

The type attribute can be used with elements such as input to specify a particular type of form control:

<input type="email" name="email">

An attribute should only be used where HTML defines it as applicable. The individual element tutorials and HTML Attribute Reference explain which attributes are available for each element.

Global Attributes

HTML also defines global attributes, which can be specified on all HTML elements, although some may have no practical effect on certain elements.

Common global attributes include:

id — assigns an identifier to an element.
class — assigns one or more class names to an element.
title — provides advisory information about an element.
lang — identifies the language of an element's content.
hidden — indicates that an element is not currently relevant and should not be rendered.
data-* — stores custom data associated with an element.

For example:

<p id="welcome" class="intro">Welcome to our website.</p>

The next tutorial, Global Attributes, examines these attributes and their uses in greater detail.

Attribute Order

HTML generally does not require attributes in a start tag to appear in a particular order. The following examples therefore represent the same basic attribute information:

<img src="photo.jpg" alt="Mountain landscape" width="600">
<img width="600" alt="Mountain landscape" src="photo.jpg">

Even though the browser does not normally depend on attribute order, using a consistent order can make markup easier for people to scan and maintain.

When working on an existing website or with other people, follow the attribute-order conventions established for the project rather than rearranging attributes simply to match a personal preference.

Common Attribute Mistakes

Attribute errors can change how an element behaves or cause the browser to interpret the start tag differently than intended. Many of these problems are easier to avoid by using consistent formatting.

Common attribute mistakes include:

Misspelling an attribute name.
Using an attribute on an element where it is not permitted.
Forgetting whitespace between multiple attributes.
Leaving a quotation mark open or mismatching quotation marks.
Using an invalid value for an attribute.
Placing attributes inside an end tag.
Assuming that attribute="false" disables a boolean attribute.
Repeating the same attribute name on an element.

For example, these attributes are missing the whitespace that should separate them:

<!-- Incorrect -->
<a href="about.html"title="About Us">About Us</a>

Write the attributes separately:

<!-- Correct -->
<a href="about.html" title="About Us">About Us</a>

Careful formatting makes the individual attributes easier to identify and helps prevent small syntax errors from becoming difficult-to-find problems.

HTML Attribute Best Practices

Consistent attribute syntax makes HTML easier to read, edit, troubleshoot, and maintain, particularly when several people work with the same markup.

Use lowercase attribute names for consistency.
Use double quotation marks around attribute values.
Separate multiple attributes with whitespace.
Use attributes only on elements where they are permitted.
Use valid values appropriate for each attribute.
Place attributes in start tags, not end tags.
Do not repeat the same attribute on an element.
Use the presence or absence of boolean attributes correctly.
Follow consistent attribute formatting throughout a project.

Attributes should add meaningful information or functionality to an element. Understanding what an attribute does and which values it accepts is more useful than simply memorizing attribute names.

Summary

HTML attributes provide additional information about elements and are written inside start tags. Most attributes consist of a name and value, multiple attributes are separated by whitespace, and boolean attributes represent a true state through their presence.

Some attributes apply to particular elements or groups of elements, while global attributes can be specified on all HTML elements. Using valid attributes and values with consistent formatting helps create HTML that is easier to understand, troubleshoot, and maintain.