HTML Attributes Guide
Comprehensive reference for all HTML attributes
accesskey
Allows users to press a specific keyboard key (like Alt + S) to quickly focus or activate this element. It's like a shortcut for better accessibility.
<button accesskey="s">Save</button>class
Lets you assign one or more names to an element. These names can be used in CSS to style the element or in JavaScript to select it.
<div class="card highlight"></div>contenteditable
Turns any element into something you can edit directly on the webpage—just like a text field. Great for custom editors or notes.
<p contenteditable="true">Edit me</p>data-*
Lets you store custom data in any element using attributes like `data-user-id`. You can later access these values using JavaScript.
<div data-user-id="123"></div>dir
Controls the text direction. Use 'ltr' for left-to-right (like English), and 'rtl' for right-to-left (like Arabic or Hebrew).
<p dir="rtl">مرحبا</p>draggable
Allows the user to drag the element with a mouse or touch. Set it to 'true' or 'false'. Often used in drag-and-drop interfaces.
<img draggable="false" src="image.jpg">enterkeyhint
Suggests what the Enter key should say or do on mobile keyboards (like 'send', 'search', etc.). Improves user experience on mobile.
<textarea enterkeyhint="send"></textarea>hidden
Makes the element invisible to users, but it still exists in the HTML. Can be shown later using JavaScript.
<div hidden>This is hidden</div>id
Gives a unique name to the element. Useful for linking, JavaScript targeting, or CSS styling. Only one element should use the same ID.
<section id="intro"></section>inert
Disables all interactions with the element and its children (clicks, focus, etc.). The user can't interact with it at all.
<div inert>This section is disabled</div>inputmode
Tells mobile keyboards what kind of keyboard to show (numeric, email, etc.). Helps users type the right input.
<input inputmode="numeric">lang
Defines the language of the content in the element. Helps search engines and screen readers understand the language.
<html lang="en">popover
Connects a button to a popover element that shows more info when clicked. Works with the new Popover API.
<button popover="infoBox">More Info</button>spellcheck
Tells the browser whether to check spelling in the element (usually text inputs or contenteditable areas).
<textarea spellcheck="false"></textarea>style
Applies custom CSS styles directly to the element. Use carefully—it's better to use CSS files when possible.
<p style="color: red;">Warning</p>tabindex
Sets the order in which users can move through elements using the Tab key. Great for keyboard navigation.
<div tabindex="0">I can be tabbed</div>title
Adds a tooltip (a small popup) that appears when you hover your mouse over the element.
<abbr title="World Health Organization">WHO</abbr>translate
Tells the browser whether to translate the content (useful for things like brand names or technical terms).
<p translate="no">ReactJS</p>id
Unique identifier for an element
Usage: Single use per page
<div id="header">class
Space-separated list of class names
Usage: Reusable across elements
<p class="text large">style
Inline CSS styling
Usage: Avoid for maintainability
<div style="color: red;">title
Additional information (tooltip)
Usage: Accessibility enhancement
<abbr title="HyperText Markup Language">HTML</abbr><a>
href
URL of the link
<a href="https://example.com">Link</a>target
Where to open (_blank, _self)
<a href="/about" target="_blank">About</a>rel
Relationship (nofollow, etc.)
<a href="https://external.com" rel="nofollow">External</a><img>
src
Image source URL
<img src="photo.jpg" alt="A photo">alt
Alternative text (required)
<img src="logo.png" alt="Company Logo">width/height
Dimensions in pixels
<img src="icon.png" width="32" height="32"><input>
type
Input type (text, email, etc.)
<input type="email" name="email">placeholder
Hint text
<input placeholder="Enter your name">required
Makes field mandatory
<input type="text" required>Basic Attributes
Form with Attributes
Accessibility Attributes
Interactive HTML Playground
Explore and experiment with all HTML examples in our live editor
HTML Examples Preview
Ready-to-use examples covering all attribute types
Global Attributes
accesskeyAllows users to press a specific keyboard key (like Alt + S) to quickly focus or activate this element. It's like a shortcut for better accessibility.
classLets you assign one or more names to an element. These names can be used in CSS to style the element or in JavaScript to select it.
contenteditableTurns any element into something you can edit directly on the webpage—just like a text field. Great for custom editors or notes.
data-*Lets you store custom data in any element using attributes like `data-user-id`. You can later access these values using JavaScript.
Element-Specific Examples
All examples will be loaded into an interactive editor where you can modify and test them