HTML Attributes

Common HTML Attributes

<div id="header">Content</div>

<p class="highlight">Text</p>

<h1 style="color: red;">Title</h1>

<span title="Tooltip">Hover me</span>

🔹 Global Attributes

These attributes can be used on any HTML element:

🔸 The id Attribute

<!-- Each id must be unique on the page -->
<h1 id="main-title">Welcome to My Website</h1>
<p id="intro-text">This is the introduction paragraph.</p>
<div id="content-area">
    <p>Main content goes here.</p>
</div>

<!-- Link to an element with id -->
<a href="#main-title">Go to title</a>

🔸 The class Attribute

<!-- Multiple elements can share the same class -->
<p class="highlight">This text is highlighted.</p>
<p class="highlight important">This has multiple classes.</p>
<div class="container">
    <span class="highlight">Highlighted span</span>
</div>

<style>
    .highlight {
        background-color: yellow;
        padding: 5px;
    }
    .important {
        font-weight: bold;
        color: red;
    }
</style>

🔸 The style Attribute

<!-- Inline CSS styles -->
<h2 style="color: blue; text-align: center;">Blue Centered Title</h2>
<p style="font-size: 18px; line-height: 1.5; margin: 20px 0;">
    Styled paragraph with custom font size and spacing.
</p>
<div style="background: #f0f0f0; padding: 15px; border: 1px solid #ccc;">
    Styled container with background and border.
</div>

🔹 Link Attributes

Special attributes for anchor (<a>) elements:

<!-- Basic link -->
<a href="https://example.com">Visit Example</a>

<!-- Open in new tab -->
<a href="https://google.com" target="_blank">Open Google in New Tab</a>

<!-- Email link -->
<a href="mailto:contact@example.com">Send Email</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>

<!-- Download link -->
<a href="document.pdf" download="my-document.pdf">Download PDF</a>

<!-- Link with title (tooltip) -->
<a href="about.html" title="Learn more about our company">About Us</a>

🔹 Image Attributes

Essential attributes for <img> elements:

<!-- Basic image -->
<img src="photo.jpg" alt="Description of the image">

<!-- Image with dimensions -->
<img src="logo.png" alt="Company Logo" width="200" height="100">

<!-- Responsive image -->
<img src="banner.jpg" alt="Website Banner" style="max-width: 100%; height: auto;">

<!-- Image with title tooltip -->
<img src="product.jpg" alt="Product Photo" title="Click to view larger image">

<!-- Image that loads lazily -->
<img src="large-image.jpg" alt="Large Image" loading="lazy">

🔹 Form Attributes

Attributes that make forms more functional:

<form action="/submit" method="post">
    <!-- Text input with placeholder -->
    <input type="text" name="username" placeholder="Enter your username" required>
    
    <!-- Email input with validation -->
    <input type="email" name="email" placeholder="your@email.com" required>
    
    <!-- Password with minimum length -->
    <input type="password" name="password" minlength="8" required>
    
    <!-- Number input with range -->
    <input type="number" name="age" min="18" max="100" value="25">
    
    <!-- Textarea with rows and columns -->
    <textarea name="message" rows="4" cols="50" placeholder="Your message here"></textarea>
    
    <!-- Select dropdown -->
    <select name="country" required>
        <option value="">Choose a country</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
    </select>
    
    <!-- Checkbox -->
    <input type="checkbox" name="newsletter" id="newsletter" checked>
    <label for="newsletter">Subscribe to newsletter</label>
    
    <!-- Submit button -->
    <input type="submit" value="Submit Form">
</form>

🔹 Data Attributes

Custom attributes for storing extra information:

<!-- Custom data attributes start with "data-" -->
<div data-user-id="12345" data-role="admin" data-last-login="2024-01-15">
    User Profile
</div>

<button data-action="delete" data-confirm="Are you sure?">
    Delete Item
</button>

<img src="thumbnail.jpg" 
     data-full-image="full-size.jpg" 
     data-caption="Beautiful landscape photo"
     alt="Landscape thumbnail">

<script>
    // Access data attributes with JavaScript
    const userDiv = document.querySelector('[data-user-id]');
    console.log(userDiv.dataset.userId); // "12345"
    console.log(userDiv.dataset.role);   // "admin"
</script>

🔹 Boolean Attributes

Some attributes don't need values - their presence is enough:

<!-- Boolean attributes -->
<input type="text" required>           <!-- Field is required -->
<input type="text" disabled>          <!-- Field is disabled -->
<input type="text" readonly>          <!-- Field is read-only -->
<input type="checkbox" checked>       <!-- Checkbox is checked -->
<option selected>Default Option</option> <!-- Option is selected -->

<!-- Video/Audio attributes -->
<video controls autoplay muted loop>
    <source src="video.mp4" type="video/mp4">
</video>

<audio controls autoplay>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

🔹 Accessibility Attributes

Attributes that improve accessibility for all users:

<!-- ARIA attributes for screen readers -->
<button aria-label="Close dialog">×</button>
<div role="alert" aria-live="polite">Success message</div>
<input type="text" aria-describedby="help-text">
<div id="help-text">Enter your full name</div>

<!-- Language attribute -->
<html lang="en">
<span lang="es">Hola mundo</span>

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