📚 Complete Guide to HTML Attributes with Real-World Examples
HTML attributes are essential for adding meaning, behavior, and structure to your webpages. This guide covers the most important ones, categorized for easy learning and real-world application.
📚 Complete HTML Attributes Table with Real-World Examples
🔧 Global Attributes
| Attribute | Description | Example |
|---|---|---|
id | Unique identifier | <div id="main-header">Welcome</div> |
class | Group for styling | <p class="error-text">Invalid login.</p> |
style | Inline CSS | <h1 style="color: blue;">Styled Heading</h1> |
title | Tooltip on hover | <span title="More Info">Hover me</span> |
data-* | Custom data for JS | <div data-user-id="789">Profile</div> |
hidden | Hides element | <div hidden>Secret Note</div> |
tabindex | Keyboard nav order | <input tabindex="2"> |
contenteditable | Editable content | <p contenteditable="true">Edit this</p> |
draggable | Drag and drop | <img draggable="true"> |
lang | Language declaration | <p lang="fr">Bonjour</p> |
🧾 Form & Input Attributes
| Attribute | Description | Example |
|---|---|---|
action | Form submission URL | <form action="/register"> |
method | POST or GET method | <form method="POST"> |
name | Input identifier | <input name="user_email"> |
value | Default value | <input value="Jane"> |
placeholder | Input hint | <input placeholder="Enter name"> |
required | Mandatory input | <input required> |
disabled | Non-editable input | <input disabled value="N/A"> |
readonly | View-only input | <input readonly value="Locked"> |
autocomplete | Autofill control | <input autocomplete="off"> |
min / max | Input range | <input type="number" min="1" max="10"> |
step | Input increments | <input type="number" step="2"> |
pattern | Regex validation | <input pattern="\d{4}"> |
multiple | Multiple values | <input type="file" multiple> |
🎬 Media Attributes
| Attribute | Description | Example |
|---|---|---|
src | File path | <video src="clip.mp4"></video> |
alt | Image description | <img alt="Sleeping cat"> |
width, height | Dimensions | <img width="100"> |
controls | Playback UI | <video controls> |
autoplay, loop | Auto behavior | <video autoplay loop muted> |
muted | No sound | <audio muted autoplay> |
poster | Video placeholder | <video poster="thumb.jpg"> |
🔗 Anchor & Link Attributes
| Attribute | Description | Example |
|---|---|---|
href | URL destination | <a href="https://example.com">Visit</a> |
target | Open in new tab | <a target="_blank">New Tab</a> |
download | Force file download | <a href="cv.pdf" download>Get CV</a> |
rel | Link relationship | <a rel="noopener">Secure</a> |
type | MIME type | <link type="text/css"> |
📊 Table Attributes
| Attribute | Description | Example |
|---|---|---|
colspan | Merge columns | <td colspan="2">Spanned</td> |
rowspan | Merge rows | <td rowspan="2">Grouped</td> |
scope | Header scope | <th scope="row">Name</th> |
⚙️ Script Attributes
| Attribute | Description | Example |
|---|---|---|
async | Load script async | <script async src="main.js"></script> |
defer | Load after HTML | <script defer src="main.js"></script> |
type | Script type | <script type="module"> |
📈 SEO & Meta Attributes
| Attribute | Description | Example |
|---|---|---|
charset | Character encoding | <meta charset="UTF-8"> |
viewport | Mobile scaling | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
name + content | Meta info | <meta name="description" content="HTML guide"> |
♿ ARIA (Accessibility) Attributes
| Attribute | Description | Example |
|---|---|---|
role | Semantic purpose | <nav role="navigation"> |
aria-label | Label for screen readers | <button aria-label="Close">X</button> |
aria-hidden | Hide from screen readers | <div aria-hidden="true"></div> |
❌ Deprecated Attributes (Avoid)
| Attribute | Description | Example |
|---|---|---|
border | Old table border | <table border="1"> <!-- Use CSS --> |
align | Old alignment | <td align="center"> <!-- Use CSS --> |
🔧 Global HTML Attributes
id – Unique Identifier
Assigns a unique ID to an element, ideal for scripting or styling.
<div id="main-header">Welcome</div>Example: A navigation script can target #main-header for dynamic updates.
class – Reusable Styling
Groups elements with the same styles or functions.
<p class="error-text">Invalid login.</p>Example: Multiple elements can share .error-text for red warnings.
style – Inline Styling
Applies CSS directly on an element.
<h1 style="color: blue;">Styled Heading</h1>Example: Use sparingly for quick design adjustments.
title – Tooltip Text
Displays extra information on hover.
<span title="More Info">Hover me</span>Example: Enhances user experience with hints.
data-* – Custom Data Storage
Stores metadata for JavaScript use.
<div data-user-id="789">Profile</div>Example: Dynamic UIs can fetch values from these attributes.
hidden – Invisible Element
Hides elements from view and screen readers.
<div hidden>Secret Note</div>Example: Revealed conditionally via JavaScript.
tabindex – Keyboard Navigation
Defines the tabbing order of elements.
<input type="text" tabindex="2">Example: Improve accessibility in forms.
contenteditable – Inline Editing
Makes any element editable by the user.
<p contenteditable="true">Edit this text</p>Example: Useful for simple CMS interfaces.
draggable – Drag and Drop
Enables drag behavior.
<img src="logo.png" draggable="true">Example: Create interactive UIs like Kanban boards.
lang – Language Declaration
Specifies the content’s language.
<p lang="fr">Bonjour</p>Example: Helps with SEO and accessibility tools.
🧾 Form and Input Attributes
action – Form Destination
Sets the URL for form data submission.
<form action="/register">Example: Sends data to your backend.
method – Submission Type
Specifies POST or GET for data submission.
<form method="POST">Example: Use POST for secure data transmission.
name – Input Identifier
Key for identifying submitted data.
<input name="user_email">Example: Paired with a server-side script.
value – Default Input Value
Sets a pre-filled value.
<input type="text" value="Jane">Example: Useful in editable forms.
placeholder – Input Hint
Displays hint inside empty input.
<input placeholder="Enter your name">Example: Enhances form usability.
required – Mandatory Field
Ensures the field is filled before submission.
<input required>Example: Avoids incomplete forms.
disabled – Non-editable Input
Disables input entirely.
<input disabled value="N/A">Example: Show uneditable values like user ID.
readonly – View Only Input
Disables editing, but submits value.
<input readonly value="Locked">Example: Prevents changes to auto-filled fields.
autocomplete – Autofill Control
Toggles browser autofill.
<input autocomplete="off">Example: Use off for sensitive fields.
min and max – Range Limit
Controls numeric input range.
<input type="number" min="1" max="10">Example: Age input from 1 to 10.
step – Increment Control
Defines stepping interval.
<input type="number" step="2">Example: Only allows even numbers.
pattern – Regex Validation
Validates input format.
<input pattern="\d{4}">Example: Forces four-digit input like a PIN.
multiple – Multiple Values
Allows multi-selection.
<input type="file" multiple>Example: Upload several files at once.
🎬 Media Attributes
src – Source Path
Points to a media file.
<video src="clip.mp4"></video>alt – Image Description
Accessibility text for images.
<img src="cat.jpg" alt="Black kitten sleeping">width and height – Media Size
Controls display dimensions.
<img src="icon.png" width="100">controls – Media Controls
Adds play, pause, etc.
<video controls></video>autoplay and loop – Auto Behavior
Starts and repeats media.
<video autoplay loop muted></video>muted – No Sound
Disables audio on load.
<audio muted autoplay src="bg-music.mp3"></audio>poster – Preview Image
Sets placeholder before play.
<video poster="thumb.jpg" controls></video>🔗 Anchor & Link Attributes
href – Link Target
Destination of the link.
<a href="https://example.com">Visit</a>target – Open Behavior
Defines where the link opens.
<a target="_blank">New Tab</a>download – File Download
Forces file to download.
<a href="cv.pdf" download>Get CV</a>rel – Link Relationship
Describes the relation.
<a rel="noopener">Secure Link</a>type – Content Type
Defines file MIME type.
<link rel="stylesheet" type="text/css" href="style.css">📊 Table Attributes
colspan – Merge Columns
<td colspan="2">Spanned</td>rowspan – Merge Rows
<td rowspan="2">Grouped</td>scope – Header Scope
<th scope="row">Name</th>⚙️ Script Attributes
async – Load Asynchronously
<script src="main.js" async></script>defer – Load After Parsing
<script defer src="main.js"></script>type – Script Type
<script type="module"></script>📈 SEO & Meta Attributes
charset – Character Encoding
<meta charset="UTF-8">viewport – Mobile Scaling
<meta name="viewport" content="width=device-width, initial-scale=1.0">name + content – Meta Info
<meta name="description" content="Best HTML attribute guide">♿ ARIA Accessibility Attributes
role – Semantic Role
<nav role="navigation"></nav>aria-label – Label for Assistive Tech
<button aria-label="Close">X</button>aria-hidden – Hide from Screen Readers
<div aria-hidden="true"></div>❌ Deprecated Attributes (Do Not Use)
<table border="1"> <!-- Use CSS -->
<td align="center"> <!-- Use text-align CSS -->🔁 HTML in Action
<form action="/send" method="POST">
<input type="email" placeholder="Email" required autocomplete="on">
<button type="submit" title="Submit Form">Submit</button>
</form>
<img src="logo.png" alt="Brand Logo" width="100">
<a href="guide.pdf" download target="_blank" rel="noopener">Download Guide</a>✅ Conclusion
Understanding HTML attributes helps you build responsive, functional, and accessible websites. Use them wisely to level up your web development skills.
❓FAQs
Q1: Can data-* attributes be used in JavaScript?
Yes. Access them using element.dataset.
Q2: Is readonly same as disabled?
No. readonly allows data submission. disabled doesn’t.
Q3: Why use rel="noopener"?
It prevents security risks when opening links in new tabs.
Q4: Are inline styles better than CSS files?
No. Use inline styles only for quick edits.
Q5: Do ARIA attributes affect SEO?
Not directly, but they boost accessibility and user experience.
