HTML Attributes: An Basic Introduction

calender-iconPublished: 11 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

HTML attributes are used to provide additional information about an HTML element. They are used for defining its properties, behaviour, or appearance. Attributes are specified within the opening tag of an HTML element.

An attribute can be of different types. Some attributes can be used with majority of HTML elements but not all, while some attributes are element specific. Some attributes are Global which means they can be applied to every/all HTML elements though they may have no influence on some element.

An Attribute is generally defined in the form of name="value" pairs. The format for defining attribute is specified below.

  • There should be space between HTML element and attribute name
  • The attribute name followed by ('=') equal sign.
  • Followed by Attribute value enclosed in opening and closing quote mark
  • In case of multiple attributes each name="value" pair should be separated by space.
HTML Attributes

Syntax: 

<tagname attribute1="value1" attribute2="value2">Content</tagname>

Example: 

<abbr href="www.example.com">Example.com</abbr>


Boolean Attribute

A Boolean attribute is an attribute that represents either true or false value. When an HTML element contains Boolean attribute it represents true value and when Boolean attribute is absent or not specified it represents false value.

For Boolean attribute strings like true or false are invalid values. Invalid values always resolve to True. Boolean Attribute always resolve to true when the attribute is present and its value is present, omitted, or invalid.

When Boolean attribute is used it can be written in multiple formats specified below.

  • The Attribute Name alone, in this case value is not specified
  • The Attribute Name followed by empty value ex. checked=""
  • The Attribute Name with value equal to attribute name itself ex. checked="checked"

Syntax: 

<input type="checkbox" checked />    
<input type="checkbox" checked=""/> 
<input type="checkbox" checked="checked"/>

The Boolean Attributes in HTML are listed below.

  • autofocus
  • autoplay
  • allowfullscreen
  • checked
  • controls
  • disabled
  • default
  • inert
  • loop
  • muted
  • required
  • reversed
  • readonly
  • multiple
  • readonly
  • selected

Enumerated Attribute

An Enumerated attribute is an attribute whose value is limited to a set of predefined valid values. Ex. the HTML attribute dir has three valid values ltr, rtl and auto.

Each Enumerated attribute has a default value when the attribute is present without a defined value. They also have a default value when the attribute's value is invalid. This default value when attribute's value is absent can be different from the default value when attribute's value is invalid.

For Example: The HTML attribute contenteditable has two valid values true and false. When the attribute is defined with no value set on it, it resolves to true. When this attribute is missing or its value is invalid, then it resolves to inherit.

The Enumerated Attributes in HTML are listed below (list not exhaustive).

  • contenteditable
  • dir
  • draggable
  • spellcheck
  • translate
  • virtualkeyboardpolicy(experimental)
  • hidden
  • writingsuggestions

Global Attribute

Global attributes are attributes that can be used with all HTML elements. For Example, class is global attribute and can be set on any element. While in theory, they can be added to any HTML element, some global attributes have no effect when set on some elements. We have described Global Attribute in details on our Global Attribute: An Basic Introduction page.

Frequently Asked Questions (FAQ)

Should boolean attributes have a value?
No, boolean attributes don’t need a value. In HTML, boolean attributes are special because their mere presence means "true" — you don’t have to assign them a value like "true" or "false".

What values can enumerated attributes have?
An Enumerated attribute is an attribute whose value is limited to a set of predefined valid values. Ex. the HTML attribute dir has three valid values ltr, rtl and auto.

What happens if you set an invalid value to an enumerated attribute?
When you set an invalid value for an enumerated attribute in HTML: The browser will ignore your invalid value. Instead, it will fall back to a default behaviour or value (defined by the HTML specification for that attribute).

What is the meaning of "on" and "off" values in HTML attributes?
In HTML, the values "on" and "off" are typically associated with specific attributes that control the state or behaviour of an element, often in the context of form elements or features like autocomplete, autocorrect, or spellcheck. These values are part of enumerated attributes, which accept a predefined set of values to toggle a feature explicitly. The meaning of "on" and "off" is straightforward: they enable ("on") or disable ("off") the associated feature.

Is contenteditable an enumerated attribute?
Yes, contenteditable is an enumerated attribute in HTML!

What is the difference between boolean and enumerated attributes in HTML?
Boolean Attributes Represent a true/false state by their presence or absence. Enumerated Attributes Accept one value from a predefined set of keyword options.

Are html attributes case sensitive?
No, HTML attributes are not case-sensitive in standard HTML5.

How to add attribute in html?
To add an attribute in HTML, you simply include it inside the opening tag of an HTML element using this format:

<tagname attribute="value">Content</tagname>


What are the rules and best practices for assigning values to the id attribute in HTML?
When creating id attributes for HTML elements, there are several important rules and best practices to follow:

1.Must be unique
Each id must be unique within the HTML document — no two elements can share the same id.

2. Must start with a letter:
The value should begin with a letter (A-Z or a-z). While some browsers tolerate starting with digits, it's not considered valid HTML.

3. Can contain:
  • Letters (A-Z, a-z)
  • Digits (0–9)
  • Hyphens (-)
  • Underscores (_)
  • Colons (: — valid, but not recommended due to legacy XML issues)
  • Periods (. — allowed but discouraged)

4. No spaces:
The id cannot contain spaces. Use hyphens or underscores instead for readability.

5. Case-sensitive:
IDs are case-sensitive (myId ≠ myid).

6. No Reserved Keywords:
Avoid using reserved or invalid names that might conflict with JavaScript, CSS, or HTML standards (e.g., don't use id="class" or id="function" as they may cause confusion or issues in scripts).

7. Descriptive and Meaningful: Use clear, descriptive id values that reflect the element’s purpose or content for better code readability.