Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<element attribute="value">content</element>Name
Equals Sign
Value in Quotes
Separate with Space
<a href="page.html">Link</a><img src="photo.jpg" alt="Photo"><div class="main container"><a href=page.html> <img src = "photo.jpg"> <div CLASS="main"> Practical examples of essential HTML attributes working together
<div id="main-content" class="container">
<h2 class="title">HTML Attributes Demo</h2>
<!-- Link with multiple attributes -->
<a
href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer"
title="Visit MDN Web Docs">
MDN Web Docs
</a>
<!-- Image with accessibility -->
<img
src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400&h=200&fit=crop"
alt="Professional web development workspace showing HTML attributes in practice"
width="400"
height="200"
loading="lazy" />
<!-- Form with validation -->
<form class="contact-form">
<input
type="email"
name="email"
placeholder="Enter your email"
required
aria-label="Email address" />
<button type="submit" class="btn-primary">
Subscribe
</button>
</form>
<!-- Data attributes -->
<div
class="product-card"
data-product-id="12345"
data-category="tech"
data-price="99.99">
<h3>Product with Data Attributes</h3>
<p>Check the HTML to see custom data-* attributes!</p>
</div>
</div>Loading preview...
Unique identifier for an element
Use Cases:
#main#section1<div id="header">...</div>One or more class names (space-separated)
Use Cases:
.btn<p class="text intro highlight">Inline CSS styles
Use Cases:
<p style="color: blue; font-size: 16px;">Tooltip text on hover
Use Cases:
<abbr title="World Wide Web">WWW</abbr>Custom data attributes
Use Cases:
<div data-user-id="123" data-role="admin">Language and text direction
Use Cases:
<p lang="es" dir="ltr">Hola</p>Explore id, class, title, style, data-* and other global attributes
hrefURL destination (required)
href="https://example.com"target_blank (new tab), _self (same tab)
target="_blank"relRelationship: noopener, noreferrer, nofollow
rel="noopener noreferrer"downloadDownloads link instead of navigating
download="file.pdf"hreflangLanguage of linked document
hreflang="es"typeMIME type of linked resource
type="application/pdf"Master href, target, rel, download and other link attributes
srcREQUIREDImage source URL (required)
src="photo.jpg"altREQUIREDAlternative text for accessibility (required)
alt="Sunset photo"widthImage width in pixels
width="300"heightImage height in pixels
height="200"loadinglazy (defer), eager (immediate)
loading="lazy"srcsetResponsive image sources
srcset="img-400.jpg 400w"sizesImage sizes for different viewports
sizes="(max-width: 600px) 100vw"decodingasync, sync, auto
decoding="async"Learn src, alt, width, height, loading and responsive image attributes
actionURL to submit form data
action="/submit"methodGET or POST
method="post"enctypeEncoding type for file uploads
enctype="multipart/form-data"autocompleteon or off
autocomplete="off"novalidateSkip HTML5 validation
novalidatetargetWhere to display response
target="_blank"typetext, email, password, number, etc.
type="email"nameForm field name (required)
name="username"valueInitial/default value
value="default"placeholderHint text
placeholder="Enter email"requiredField must be filled
requireddisabledField cannot be edited
disabledreadonlyCan view but not edit
readonlymin / maxRange for numbers/dates
min="1" max="100"minlength / maxlengthText length constraints
maxlength="50"patternRegex validation
pattern="[0-9]{3}"autocompleteBrowser autofill hints
autocomplete="email"autofocusAuto-focus on page load
autofocusExplore action, method, name, placeholder, required and form validation attributes
roleElement purpose: button, navigation, alert
role="navigation"aria-labelAccessible name for element
aria-label="Close dialog"aria-labelledbyID of labeling element
aria-labelledby="heading1"aria-describedbyID of describing element
aria-describedby="hint1"aria-hiddenHide from screen readers
aria-hidden="true"aria-expandedCollapsed/expanded state
aria-expanded="false"aria-pressedToggle button state
aria-pressed="true"aria-currentCurrent item in navigation
aria-current="page"aria-liveAnnounce dynamic changes
aria-live="polite"aria-controlsID of controlled element
aria-controls="menu1"Master aria-label, aria-describedby, role and other accessibility attributes
Note: Modern practice prefers addEventListener() in external JavaScript files for better separation of concerns.
onclickElement clicked
ondblclickDouble-clicked
onmouseoverMouse enters
onmouseoutMouse leaves
onmousedownMouse button pressed
onmouseupMouse button released
onkeydownKey pressed down
onkeyupKey released
onkeypressKey pressed
onchangeValue changed
oninputInput value changing
onsubmitForm submitted
onfocusElement focused
onblurElement lost focus
onloadElement loaded
Experiment with onclick, onmouseover, onchange and other event handlers
controlsautoplayloopmutedposterpreloadcolspanrowspanscopeheaderscharsetnamecontenthttp-equivpropertycheckedselecteddisabledreadonlyrequiredhiddenEssential attributes for embedding and optimizing images
<!-- Basic Image with alt -->
<figure>
<img
src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400&h=300&fit=crop"
alt="Modern web development workspace with multiple monitors"
width="400"
height="300"
title="Hover for more info - Web Development"
/>
<figcaption>Standard image with dimensions</figcaption>
</figure>
<!-- Lazy Loading -->
<figure>
<img
src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400&h=300&fit=crop"
alt="Code editor with lazy loading demonstration"
loading="lazy"
width="400"
height="300"
/>
<figcaption>Image with lazy loading enabled</figcaption>
</figure>
<!-- Responsive with srcset (simulated) -->
<figure>
<img
src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop"
alt="Responsive image that adapts to different screen sizes"
sizes="(max-width: 600px) 100vw, (max-width: 1000px) 90vw, 80vw"
width="800"
height="600"
/>
<figcaption>Image adapts based on viewport size</figcaption>
</figure>Loading preview...
Interactive form with validation, autocomplete, and input constraints
<h2>Form Attributes Example</h2>
<form class="demo-form">
<!-- Text with constraints -->
<div class="form-group">
<label for="username">Username (3-20 chars):</label>
<input
type="text"
id="username"
name="username"
placeholder="Enter username"
minlength="3"
maxlength="20"
required
autocomplete="username"
pattern="[a-zA-Z0-9_-]+"
title="Only letters, numbers, underscore, hyphen"
/>
</div>
<!-- Email validation -->
<div class="form-group">
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="you@example.com"
required
autocomplete="email"
/>
</div>
<!-- Number with range -->
<div class="form-group">
<label for="age">Age (18-120):</label>
<input
type="number"
id="age"
name="age"
min="18"
max="120"
step="1"
value="25"
/>
</div>
<!-- Select dropdown -->
<div class="form-group">
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">-- Select --</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="checkbox">
<input type="checkbox" name="subscribe" />
Subscribe to newsletter
</label>
</div>
<!-- Radio buttons -->
<div class="form-group">
<fieldset>
<legend>Plan:</legend>
<label class="radio">
<input type="radio" name="plan" value="free" checked />
Free
</label>
<label class="radio">
<input type="radio" name="plan" value="pro" />
Pro
</label>
</fieldset>
</div>
<!-- Buttons -->
<div class="button-group">
<button type="submit" class="btn-primary">Submit</button>
<button type="reset" class="btn-secondary">Reset</button>
</div>
</form>Loading preview...
Using data-* attributes to store and manipulate custom information
<h2>Product Cards with Data Attributes</h2>
<div class="products">
<div class="product-card"
data-product-id="101"
data-price="29.99"
data-category="electronics"
data-in-stock="true"
data-rating="4.5"
title="Click to view details"
>
<div class="product-image">📱</div>
<h3>Smartphone</h3>
<p class="price">$29.99</p>
<p class="rating">⭐ 4.5/5</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card"
data-product-id="102"
data-price="49.99"
data-category="electronics"
data-in-stock="true"
data-rating="4.8"
>
<div class="product-image">💻</div>
<h3>Laptop</h3>
<p class="price">$49.99</p>
<p class="rating">⭐ 4.8/5</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card"
data-product-id="103"
data-price="19.99"
data-category="accessories"
data-in-stock="false"
data-rating="4.2"
>
<div class="product-image">🎧</div>
<h3>Headphones</h3>
<p class="price">$19.99</p>
<p class="rating">⭐ 4.2/5</p>
<button class="add-to-cart" disabled>Out of Stock</button>
</div>
</div>
<div id="info-panel" class="info-panel">
<p>Click a product to see its data attributes</p>
</div>Loading preview...
ARIA, role, and semantic attributes for better accessibility
<h2>Accessible Interactive Component</h2>
<button
id="menu-toggle"
aria-expanded="false"
aria-controls="navigation-menu"
aria-label="Toggle navigation menu"
class="menu-button"
>
☰ Menu
</button>
<nav
id="navigation-menu"
role="navigation"
aria-label="Main navigation"
hidden
class="navigation"
>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div role="alert" aria-live="polite" aria-atomic="true" id="status" class="status-message">
Ready
</div>
<div class="form-section">
<label for="search">Search:</label>
<input
type="text"
id="search"
aria-label="Search products"
aria-describedby="search-hint"
placeholder="Type to search..."
/>
<p id="search-hint" class="hint">
Enter product name or category
</p>
</div>Loading preview...
Explore global attributes, link attributes, image attributes, form attributes, ARIA, and data attributes in one comprehensive interactive playground