🏷️ HTML Attributes

Learn all the attributes you can use in HTML elements.

Global Attributes

These work on almost any HTML element:

Essential Global Attributes

<!-- id: Unique identifier -->
<p id="paragraph1">Paragraph</p>

<!-- class: CSS class for styling -->
<p class="highlight">Important paragraph</p>

<!-- style: Inline CSS -->
<p style="color: red; font-size: 18px;">Styled paragraph</p>

<!-- title: Tooltip on hover -->
<p title="This is a tooltip">Hover over me</p>

<!-- data-*: Custom data -->
<p data-user-id="123" data-status="active">User info</p>

<!-- lang: Language -->
<p lang="en">English text</p>
<p lang="fr">Texte français</p>

Accessibility Attributes

<!-- role: Define element role -->
<div role="button" tabindex="0">Click me</div>

<!-- aria-label: Screen reader label -->
<button aria-label="Close menu">×</button>

<!-- aria-labelledby: Label relationship -->
<h2 id="heading">Section Title</h2>
<div aria-labelledby="heading">Content</div>

<!-- aria-describedby: Additional description -->
<input type="text" aria-describedby="help-text">
<p id="help-text">Enter your email</p>

<!-- aria-hidden: Hide from screen readers -->
<span aria-hidden="true">→</span>

<!-- tabindex: Tab navigation order -->
<button tabindex="1">First</button>
<button tabindex="2">Second</button>

Meta Attributes

<!-- hidden: Hide element -->
<p hidden>This is hidden</p>

<!-- dir: Text direction -->
<p dir="ltr">Left to right</p>
<p dir="rtl">Right to left</p>

<!-- draggable: Allow dragging -->
<p draggable="true">Drag me</p>

<!-- contenteditable: Make editable -->
<p contenteditable="true">Edit this text</p>

<!-- spellcheck: Enable spell check -->
<textarea spellcheck="true"></textarea>

Image Attributes

<!-- src: Image source -->
<img src="image.jpg" alt="Description">

<!-- alt: Alternative text -->
<img src="image.jpg" alt="A cat sitting on a mat">

<!-- width & height: Dimensions -->
<img src="image.jpg" width="200" height="150" alt="Image">

<!-- title: Tooltip -->
<img src="image.jpg" alt="Image" title="This is an image">

<!-- loading: Lazy loading -->
<img src="image.jpg" loading="lazy" alt="Image">

<!-- srcset: Responsive sources -->
<img 
    srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
    sizes="(min-width: 1200px) 1200px, 100vw"
    src="medium.jpg" 
    alt="Responsive image"
>

<!-- crossorigin: CORS setting -->
<img src="image.jpg" crossorigin="anonymous" alt="Image">

<!-- decoding: Decode hint -->
<img src="image.jpg" decoding="async" alt="Image">

<!-- ismap: Server-side image map -->
<img src="map.jpg" ismap alt="Image map">

<!-- usemap: Client-side image map -->
<img src="map.jpg" usemap="#mapname" alt="Image map">

<!-- importance: Resource priority -->
<img src="image.jpg" importance="low" alt="Image">

Link Attributes

<!-- href: Link destination -->
<a href="https://example.com">External link</a>
<a href="page.html">Internal link</a>
<a href="#section">Anchor link</a>

<!-- target: Open location -->
<a href="page.html" target="_self">Same tab</a>
<a href="page.html" target="_blank">New tab</a>
<a href="page.html" target="_parent">Parent frame</a>
<a href="page.html" target="_top">Full window</a>

<!-- rel: Relationship -->
<a href="license.html" rel="license">License</a>
<a href="next.html" rel="next">Next page</a>
<a href="prev.html" rel="prev">Previous page</a>
<a href="external.com" rel="external">External site</a>
<a href="profile.html" rel="author">Author</a>

<!-- title: Link tooltip -->
<a href="page.html" title="Go to page">Link</a>

<!-- download: Force download -->
<a href="file.pdf" download>Download PDF</a>
<a href="file.pdf" download="custom-name.pdf">Download</a>

<!-- hreflang: Language of link -->
<a href="es/page.html" hreflang="es">Spanish version</a>

<!-- ping: Analytics ping -->
<a href="page.html" ping="https://analytics.com/ping">Link</a>

Form Attributes

Form Element

<!-- action: Form submission URL -->
<form action="/submit" method="POST">
    <button type="submit">Submit</button>
</form>

<!-- method: HTTP method -->
<form method="GET">...</form>
<form method="POST">...</form>

<!-- enctype: Encoding type -->
<form enctype="application/x-www-form-urlencoded">...</form>
<form enctype="multipart/form-data">...</form>
<form enctype="text/plain">...</form>

<!-- novalidate: Skip validation -->
<form novalidate>...</form>

<!-- target: Submit location -->
<form target="_blank">...</form>

<!-- autocomplete: Browser autocomplete -->
<form autocomplete="on">...</form>
<form autocomplete="off">...</form>

<!-- name: Form identifier -->
<form name="myForm">...</form>

<!-- accept-charset: Accepted encodings -->
<form accept-charset="UTF-8">...</form>

Input Attributes

<!-- type: Input type -->
<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="range">
<input type="date">
<input type="color">
<input type="file">

<!-- name: Field identifier -->
<input name="username">

<!-- value: Default value -->
<input type="text" value="default text">

<!-- placeholder: Hint text -->
<input type="email" placeholder="user@example.com">

<!-- required: Must fill -->
<input type="email" required>

<!-- disabled: Disable field -->
<input type="text" disabled>

<!-- readonly: Cannot edit -->
<input type="text" readonly value="Read-only">

<!-- maxlength: Max characters -->
<input type="text" maxlength="50">

<!-- minlength: Min characters -->
<input type="text" minlength="5">

<!-- min: Minimum value -->
<input type="number" min="1">

<!-- max: Maximum value -->
<input type="number" max="100">

<!-- step: Increment step -->
<input type="number" step="5">

<!-- pattern: Regex validation -->
<input type="text" pattern="[A-Z][a-z]+">

<!-- accept: File types -->
<input type="file" accept=".jpg,.png,.gif">
<input type="file" accept="image/*">

<!-- autocomplete: Autocomplete hint -->
<input type="email" autocomplete="email">
<input type="password" autocomplete="current-password">

<!-- size: Display width -->
<input type="text" size="30">

<!-- multiple: Multiple files -->
<input type="file" multiple>

<!-- checked: Default checked -->
<input type="checkbox" checked>
<input type="radio" checked>

<!-- autofocus: Auto focus -->
<input type="text" autofocus>

<!-- spellcheck: Spell checking -->
<input type="text" spellcheck="true">

<!-- list: Connect to datalist -->
<input type="text" list="browsers">
<datalist id="browsers">
    <option>Chrome</option>
    <option>Firefox</option>
</datalist>

Select Attributes

<!-- name: Field identifier -->
<select name="country">...</select>

<!-- multiple: Multiple selection -->
<select multiple>...</select>

<!-- disabled: Disable select -->
<select disabled>...</select>

<!-- size: Display rows -->
<select size="5">...</select>

<!-- required: Must select -->
<select required>...</select>

<!-- autofocus: Auto focus -->
<select autofocus>...</select>

Textarea Attributes

<!-- name: Field identifier -->
<textarea name="message"></textarea>

<!-- rows: Height in rows -->
<textarea rows="10"></textarea>

<!-- cols: Width in columns -->
<textarea cols="50"></textarea>

<!-- placeholder: Hint text -->
<textarea placeholder="Enter your message..."></textarea>

<!-- required: Must fill -->
<textarea required></textarea>

<!-- disabled: Disable field -->
<textarea disabled></textarea>

<!-- readonly: Cannot edit -->
<textarea readonly></textarea>

<!-- maxlength: Max characters -->
<textarea maxlength="500"></textarea>

<!-- minlength: Min characters -->
<textarea minlength="10"></textarea>

<!-- spellcheck: Spell checking -->
<textarea spellcheck="true"></textarea>

<!-- autofocus: Auto focus -->
<textarea autofocus></textarea>

<!-- wrap: Text wrapping -->
<textarea wrap="hard">...</textarea>
<textarea wrap="soft">...</textarea>

Media Attributes

Video

<video 
    width="320" 
    height="240" 
    controls 
    autoplay 
    muted 
    loop 
    poster="thumbnail.jpg"
>
    <source src="movie.mp4" type="video/mp4">
    Your browser doesn't support video.
</video>

Attribute	Purpose
width	Video width
height	Video height
controls	Show controls
autoplay	Auto play (muted required)
muted	Mute audio
loop	Loop video
poster	Thumbnail image
preload	Preload strategy

Audio

<audio controls autoplay loop muted>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser doesn't support audio.
</audio>

Track (Subtitles)

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="subtitles-es.vtt" srclang="es" label="Spanish">
</video>

Table Attributes

<!-- scope: Header scope -->
<th scope="col">Column header</th>
<th scope="row">Row header</th>

<!-- colspan: Span columns -->
<td colspan="2">Spans 2 columns</td>

<!-- rowspan: Span rows -->
<td rowspan="3">Spans 3 rows</td>

<!-- headers: Associate with headers -->
<td headers="col1 row1">Data</td>

Script & Style Attributes

<!-- Script src -->
<script src="script.js"></script>

<!-- Script type -->
<script type="module">...</script>
<script type="text/javascript">...</script>

<!-- async: Load asynchronously -->
<script src="script.js" async></script>

<!-- defer: Execute after page load -->
<script src="script.js" defer></script>

<!-- nomodule: Fallback for old browsers -->
<script nomodule src="script-legacy.js"></script>

<!-- Style -->
<style type="text/css">...</style>

<!-- Link rel -->
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<link rel="manifest" href="manifest.json">

Meta Attributes

<head>
    <!-- charset -->
    <meta charset="UTF-8">
    
    <!-- name & content -->
    <meta name="description" content="Page description">
    <meta name="keywords" content="html, tags, attributes">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- http-equiv -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="30">
    
    <!-- property (Open Graph) -->
    <meta property="og:title" content="Title">
    <meta property="og:image" content="image.jpg">
</head>

Complete Attributes Example

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Demo of HTML attributes">
    <title>HTML Attributes Demo</title>
    <style type="text/css">
        .highlight { color: red; }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav>
        <a href="/" title="Home">Home</a>
        <a href="/about">About</a>
        <a href="external.com" target="_blank" rel="external">External</a>
    </nav>
    
    <!-- Main content -->
    <main id="content">
        <!-- Form -->
        <form action="/submit" method="POST" novalidate>
            <input 
                type="email" 
                name="email" 
                placeholder="Enter email"
                required
                autocomplete="email"
                aria-label="Email address"
            >
            
            <textarea 
                name="message" 
                rows="5" 
                placeholder="Your message"
                maxlength="500"
                required
            ></textarea>
            
            <button type="submit">Send</button>
        </form>
        
        <!-- Image -->
        <img 
            src="image.jpg" 
            alt="Description"
            title="Hover text"
            loading="lazy"
            width="400"
            height="300"
        >
        
        <!-- Video -->
        <video controls width="320" height="240">
            <source src="video.mp4" type="video/mp4">
        </video>
    </main>
    
    <script src="script.js" defer></script>
</body>
</html>

Attribute Categories Reference

Category	Common Attributes
Global	id, class, style, title, data-*, lang, role
Form	name, value, required, disabled, placeholder
Image	src, alt, width, height, loading
Link	href, target, rel, download
Media	controls, autoplay, muted, loop, poster
Access	aria-*, tabindex, role
Event	onclick, onload, onerror, onchange

---

Next Steps

→ Advanced HTML → Forms & Inputs → Semantic HTML