id وclass وstyle وtitle

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">