HTML Attributes

Table of Content

What are HTML Attributes?

HTML attributes are name-value pairs that provide additional information about HTML elements. They are used to specify the element's appearance, behavior, or content.


HTML attributes are specified within the element's start tag, after the element's name. They have the following syntax:

<element attribute1="value1" attribute2="value2" ...>

For example, the following code adds a "width" attribute to an `<img>` element, specifying the width of the image:

<img width="100" src="image.jpg">


HTML attributes can be used for various purposes, including:

  • Styling: Attributes like `style`, `color`, and `background-color` control the appearance of the element.
  • Behavior: Attributes like `onclick` and `onmouseover` define event handlers that specify actions to be performed when the element is interacted with.
  • Content: Attributes like `href`, `src`, and `alt` provide additional information about the element, such as the link destination or image source.
  • Accessibility: Attributes like `aria-label` and `title` provide information for assistive technologies to make the page accessible to all users.

Common Attributes

Some of the most commonly used HTML attributes include:

  • id: A unique identifier for the element.
  • class: A group identifier that can be applied to multiple elements.
  • src: The source of an image, video, or other resource.
  • href: The destination of a link.
  • target: The target of a link (e.g., "_blank" for a new tab).
  • width and height: Dimensions of elements like images and tables.
  • alt: Alternative text for images and other non-text content.
  • title: A tooltip that appears when the user hovers over the element.

Additional Facts

  • Attributes are case-insensitive.
  • Attribute values are always enclosed in quotes (single or double).
  • If an attribute is not specified, it will take its default value.
  • Some attributes are required for certain elements to function properly (e.g., src for <img>).
  • Attributes can be added, removed, or modified using JavaScript or CSS.

Types of HTML Attributes

Global Attributes

Attributes that can be applied to any HTML element.


  • class: Specifies one or more class names for an element.
  • id: Specifies a unique id for an element.
  • style: Specifies an inline CSS style for an element.
  • title: Specifies extra information about an element (displayed as a tooltip).
  • data-*: Used to store custom data private to the page or application.

Required Attributes

Attributes that are essential for the element to function properly. They cannot be omitted.


  • src for <img> elements
  • href for <a> elements

Optional Attributes

Attributes that enhance or modify the behavior of an element but are not necessary for its basic function. They can be omitted.


  • alt for <img> elements
  • target for <a> elements

Boolean Attributes

Attributes that can only take a single value, which is the name of the attribute. The presence of the attribute on an element represents a true value, and its absence represents a false value.


  • disabled for form elements
  • checked for checkboxes and radio buttons
  • readonly for input elements
  • required for form elements

Enumerated Attributes

Attributes that have a predefined set of possible values.


  • type for <input> elements (e.g., "text", "password", "email")
  • rel for <a> and <link> elements (e.g., "stylesheet", "noopener")

String Attributes

Attributes that can take any value that is a string of characters.


  • id for any element
  • class for any element
  • name for form elements

Difference between Tags and Attributes

Aspect Tags Attributes
Definition Tags are the basic building blocks of HTML that define elements and their structure on a webpage. Attributes provide additional information about HTML elements, usually in the form of key-value pairs.
Syntax <tagname> ... </tagname> attribute="value"
Purpose To define and organize the structure and content of a webpage. To modify or provide additional information about an HTML element.
Examples <p>, <div>, <img>, <a> id="header", class="main-content", src="image.jpg", href=""
Usage Tags enclose content and may contain other tags or text. Attributes are placed within the opening tag and do not enclose content.
Requirement Tags are mandatory for creating HTML documents. Attributes are optional but can enhance the functionality and appearance of elements.
Modification Tags define what the element is. Attributes define properties or characteristics of the element.

Commonly Used Attributes

  • Class: Represents a delimiter (a character or symbol that separates data, words, or characters), separating element instances in a group.
  • Id: Identifies a unique instance of an element in the HTML document.
  • Alt: Provides alternative information for images and other non-text elements that may not be accessible to all users.
  • Title: Provides a tooltip-like description when the cursor hovers over the element.
  • Event-Handling Attributes: Represent Javascript functions that should be executed when a specific event occurs.
  • Onclick: Specifies an action to be performed when the element is clicked.
  • Onload: Specifies an action to be performed when the page is loaded.
  • Style Attributes: Provide inline CSS to an HTML element.
  • Width: Sets the width of the element in pixels.
  • Height: Sets the height of the element in pixels.

Best Practices for Using Attributes

Using valid attribute values:

Ensure that HTML attribute values are valid and supported by browsers to guarantee proper rendering across different platforms.

For example, the "align" attribute for text alignment only accepts values like "left", "right", "center", or "justify". Using an invalid value, such as "top", will be ignored by the browser, resulting in default alignment.

Avoiding unnecessary attributes:

Minimize the use of unnecessary attributes to maintain clean and efficient code, ultimately improving website performance.

For instance, if tooltips are not utilized, omitting the "title" attribute reduces HTML size and enhances website performance.

Resources for Further Learning


How many HTML attributes are there?

How many HTML attributes are there? There are 5 attributes available in HTML:
i) Common/Global attribute
ii) Required
iii) Optional
iv) Event
v) Standard

How to use HTML attributes?

How to use HTML attributes? HTML attributes are used to provide additional information about HTML elements. They are added directly to the opening tag of an element and are generally written in the format name="value". Here is the following syntax:

Syntax: <element attribute="value">Content</element>

Can we add custom attribute in HTML element?

Can we add custom attribute in HTML element? Yes, you can add custom attributes to HTML elements using the data-* attribute syntax. These custom attributes, often called "data attributes," allow you to store extra information on standard HTML elements without using non-standard attributes or affecting the DOM structure. They are useful for adding metadata to elements and can be accessed via JavaScript for various purposes, such as storing configuration settings, user data, or other custom information.

What are HTML data attributes?

What are HTML data attributes? HTML data attributes, also known as data-* attributes, allow you to store custom data directly within HTML elements. These attributes provide a way to embed additional information about an element without using non-standard attributes or affecting the DOM structure. They are particularly useful for storing metadata or configuration options that you can access via JavaScript.

Are HTML attributes case-sensitive?

Are HTML attributes case-sensitive? HTML attributes are generally not case-sensitive. According to the HTML5 specification, attribute names are case-insensitive, meaning that attributes such as data-user-id and DATA-USER-ID are treated as the same attribute by the browser. However, for consistency and readability, it is a good practice to use lowercase for attribute names.

What is an HTML global attribute?

What is an HTML global attribute? HTML global attributes are attributes that can be applied to any HTML element. They provide common functionality and settings that are widely applicable across different elements, regardless of their specific type. These attributes enhance the flexibility and interactivity of HTML elements, allowing for more consistent and comprehensive control over the behavior and presentation of the elements. For example, class, id, lang, style, title, etc.

What are HTML aria attributes?

What are HTML aria attributes? ARIA (Accessible Rich Internet Applications) attributes are a set of special attributes used to enhance the accessibility of web content, particularly for users who rely on assistive technologies like screen readers. These attributes are part of the WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) specification. ARIA attributes help provide additional semantic information about elements, making web applications more accessible to people with disabilities.

What is HTML attribute explain with example?

What is HTML attribute explain with example? HTML attributes are additional pieces of information that can be added to HTML elements to modify their behavior, appearance, or provide metadata about the content. Attributes are placed within the opening tag of an element and are written as name-value pairs, separated by an equals sign (=). Here's an explanation of HTML attributes with examples:

                            <div id="header"> Header Content </div>
  • div tag name of the HTML element
  • id name of the attribute
  • header the value of the attribute

Can JavaScript change HTML attribute?

Can JavaScript change HTML attribute? Yes, JavaScript can change HTML attributes dynamically during runtime. This capability allows you to modify the behavior, appearance, or content of HTML elements based on user interactions, events, or other conditions. JavaScript provides several methods and properties to access and manipulate HTML attributes.