HTML Attributes

HTML attributes provide additional information about elements. They are always placed inside the opening tag and usually come in name="value" pairs.

<!-- id: unique identifier — only one per page -->
<div id="main-content">...</div>

<!-- class: reusable selector for CSS/JS -->
<p class="highlight intro-text">Important paragraph</p>

<!-- href and target on links -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
  Open Google in new tab
</a>

<!-- src and alt on images (alt is required for accessibility) -->
<img src="logo.png" alt="Company Logo" width="200" height="100" />

<!-- disabled and required on form elements -->
<input type="text" name="name" required placeholder="Your name" />
<button disabled>Cannot click</button>

<!-- data-* custom attributes (accessible via JS as element.dataset.*) -->
<button data-product-id="42" data-price="499">Add to Cart</button>

<!-- style: inline CSS (prefer external CSS instead) -->
<p style="color: red; font-weight: bold;">Warning text</p>

Global attributes (work on any HTML element):

• id — Unique identifier
• class — CSS class names (space-separated)
• style — Inline CSS styles
• hidden — Hides the element
• tabindex — Controls keyboard focus order
• aria-* — Accessibility attributes
• data-* — Custom data storage