What are HTML Attributes?

Attributes provide additional information about an HTML element. They are always written inside the opening tag (or the self‑closing tag) and usually come in name‑value pairs.

Example:
<a href="https://example.com">Visit Example</a>

• href is the attribute name.

• "https://example.com" is the attribute value.

• The attribute tells the browser where the link should go.

Basic Syntax

The general pattern for an attribute is:

<tag attribute="value">content</tag>

• The attribute name is written in lowercase (recommended, though HTML is case‑insensitive).

• The value is placed inside double quotes (single quotes are also allowed, but double quotes are the convention).

• Some attributes can appear without a value – these are called boolean attributes.

Example with multiple attributes

<img src="photo.jpg" alt="A beautiful sunset" width="500" height="300">

• src specifies the image file.

• alt provides a text description (important for accessibility).

• width and height define the image dimensions.

Common HTML Attributes

Boolean Attributes

A boolean attribute does not require a value. Its presence means true, and its absence means false.
You can write it in three ways (the first is most common in HTML5):

1. disabled (only the attribute name)

2. disabled="" (empty value)

3. disabled="disabled"

Example:
<input type="text" disabled> – the input field is disabled and cannot be edited.

Other boolean attributes: readonly, checked, required, hidden, multiple, selected.

Global Attributes

Global attributes can be used on any HTML element (though some may have no effect on certain elements).
Important global attributes:

• id – unique identifier (must be unique per page).

• class – space‑separated list of class names.

• style – inline CSS.

• title – tooltip text.

• lang – language of the element’s content (e.g., lang="en").

• hidden – boolean; hides the element from view.

• tabindex – sets the tab order for keyboard navigation.

• contenteditable – boolean; allows the user to edit the element’s content.

• data-* – custom data attributes (see below).

Custom Data Attributes

You can create your own attributes prefixed with data-. They store private data for use in JavaScript or CSS, without affecting the page’s rendering.

Example:
<div data-user-id="12345" data-role="admin">John Doe</div>

In JavaScript, you can access them via element.dataset.userId or element.dataset.role.
Data attributes are especially useful in dynamic web applications.

Rules and Best Practices

1. Always use lowercase for attribute names – it is a convention (HTML5 is case‑insensitive but lowercase is cleaner).

2. Quote attribute values – use double quotes (") for consistency.

3. Do not omit required attributes – e.g., the alt attribute for <img> is required for accessibility. If the image is purely decorative, use alt="" (empty).

4. Use boolean attributes without a value – e.g., write disabled, not disabled="false" (which would actually mean true because any value makes it true).

5. Separate multiple attributes with spaces – order does not matter.

6. Do not add duplicate attributes – only the first one is used by the browser.

Attribute vs. Property

In HTML, attributes are written in the markup. When the browser parses the page, it creates corresponding DOM properties for many attributes. Sometimes attributes and properties have different names or behaviors (e.g., class attribute vs. className property). However, for basic HTML authoring, you only need to know the attribute syntax.

Summary

• HTML attributes are added inside the opening tag.

• They usually appear as name="value".

• Boolean attributes can be written without a value.

• Global attributes like id, class, style work on all elements.

• Custom data attributes (data-*) let you store extra information.

• Following best practices (lowercase, quotes, meaningful values) keeps your HTML clean and maintainable.