HTML attributes provide additional information or functionality to HTML elements, modifying their behavior, appearance, or relationships with other elements. They are specified within the opening tag of an element in the format attribute=”value”. HTML5 supports a wide range of attributes, including global attributes (applicable to most elements) and element-specific attributes (unique to certain tags). Listing all attributes and their possible values exhaustively would be extensive, as HTML5 includes hundreds of attributes and values, many context-dependent or tied to specific elements.
1. Global Attributes
Global attributes can be used on any HTML element. They provide universal functionality like styling, identification, or accessibility.
Attribute
Description
Possible Values
Example
accesskey
Defines a keyboard shortcut to activate/focus an element.
Single character (e.g., “s”, “1”)
<button accesskey=”s”>Save</button><br>Press Alt+S (Windows) to activate.
class
Specifies one or more CSS classes for styling.
Space-separated class names
<ul class=”menu primary”><br>Applies CSS rules for .menu and .primary.
contenteditable
Makes an element’s content editable.
“true”, “false”
<p contenteditable=”true”>Edit me!</p><br>Allows users to modify the paragraph.
data-*
Stores custom data for scripting.
Any string (e.g., data-id=”123″)
<li data-item=”apple”>Apple</li><br>JavaScript can access dataset.item.
dir
Sets text direction.
“ltr”, “rtl”, “auto”
<div dir=”rtl”>Arabic text</div><br>Displays text right-to-left.
draggable
Enables drag-and-drop functionality.
“true”, “false”
<li draggable=”true”>Drag me</li><br>Allows dragging with JavaScript.
hidden
Hides an element from display.
Boolean (present or empty, e.g., hidden or hidden=””)
<ul hidden><li>Hidden item</li></ul><br>List is not visible.
id
Assigns a unique identifier to an element.
Unique string (no spaces)
<ul id=”nav”><br>Targets list with CSS (#nav) or JavaScript.
lang
Specifies the language of the element’s content.
Language code (e.g., “en”, “fr”)
<html lang=”en”><br>Indicates English content.
spellcheck
Enables/disables spell-checking.
“true”, “false”
<textarea spellcheck=”true”></textarea><br>Checks spelling in the textarea.
style
Applies inline CSS styles.
CSS rules (e.g., “color: blue;”)
<li style=”color: red;”>Red item</li><br>Item text is red.
tabindex
Controls keyboard focus order.
Integer (e.g., “0”, “1”, “-1”)
<li tabindex=”1″>Focusable</li><br>Makes list item focusable with Tab key.
title
Provides advisory information (tooltip).
Any string
<li title=”Click to select”>Item</li><br>Shows tooltip on hover.
2. Element-Specific Attributes
These attributes are tied to specific HTML elements or groups of elements. I’ll cover key elements across categories, focusing on commonly used attributes and including lists for continuity.
A. Document Metadata (<head>, <meta>, <link>, etc.)
Element
Attribute
Description
Possible Values
Example
<meta>
charset
Defines the character encoding.
Encoding (e.g., “UTF-8”)
<meta charset=”UTF-8″><br>Ensures proper text rendering.
<meta>
name, content
Provides metadata (e.g., description, keywords).
Name (e.g., “description”, “viewport”), any string for content
<meta name=”description” content=”A fruit list”><br>Improves SEO.
<link>
rel
Specifies the relationship to the linked resource.
“stylesheet”, “icon”, etc.
<link rel=”stylesheet” href=”styles.css”><br>Links a CSS file.
<link>
href
Specifies the resource URL.
URL or path
<link href=”styles.css”>
B. Structural and Semantic Elements (<div>, <nav>, <main>, etc.)
Most rely on global attributes, but some have specific ones.
Element
Attribute
Description
Possible Values
Example
<html>
manifest
Links to an application cache (rare).
URL to cache file
<html manifest=”app.cache”>
<base>
href
Sets the base URL for relative links.
URL
<base href=”https://example.com/”><br>All relative links use this base.
Event attributes trigger JavaScript when specific actions occur (e.g., clicks, keypresses). They are global but typically used with interactive elements like <button>, <input>, or <li>.
ARIA (Accessible Rich Internet Applications) attributes enhance accessibility for screen readers and assistive technologies. They’re often used with dynamic content.
Attribute
Description
Possible Values
Example
aria-label
Provides a label for elements without visible text.
String
<ul aria-label=”Fruit list”>
aria-hidden
Hides an element from assistive tech.
“true”, “false”
<li aria-hidden=”true”>Hidden</li>
aria-required
Indicates a required field.
“true”, “false”
<input aria-required=”true”>
aria-current
Marks the current item (e.g., in navigation).
“page”, “step”, “location”, etc.
<li aria-current=”page”>Home</li>
Features
Global Attributes: id, class, data-*, tabindex, title, contenteditable.
List Attributes: Custom styling via class on <ul>.
Form Attributes: action, method, type, required, aria-required.
Media Attributes: src, alt, width on <img>.
Event Attributes: onclick on <li>, onsubmit on <form>.
Overview of HTML HTML structures web content using elements, which are defined by tags (e.g.,…
We are your one-stop solution for Website Development, Digital Marketing, Graphic Design, SEO, Google My Business (GMB) Optimization, and UI/UX Design. Our expert team is committed to crafting innovative solutions that deliver results.
