🏷️ HTML Attributes

<!-- id attribute (unique identifier) -->
<div id="header">Header content</div>
<p id="intro-text">Introduction paragraph</p>

<!-- class attribute (for styling/grouping) -->
<div class="container">Content</div>
<p class="text-large text-bold">Multiple classes</p>

<!-- style attribute (inline CSS) -->
<p style="color: red; font-size: 18px;">Styled text</p>

<!-- title attribute (tooltip) -->
<p title="This is a tooltip">Hover over me</p>

<!-- href attribute (links) -->
<a href="https://example.com">Visit Example</a>
<a href="page.html">Internal Link</a>
<a href="#section">Jump to Section</a>

<!-- src: image source (required) -->
<!-- alt: alternative text (required for accessibility) -->
<img src="photo.jpg" alt="A beautiful sunset">

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

<!-- title: tooltip text -->
<img src="cat.jpg" alt="Cat" title="My pet cat">

<!-- type attribute -->
<input type="text" placeholder="Enter name">
<input type="email" placeholder="Email address">
<input type="password" placeholder="Password">
<input type="number" min="0" max="100">

<!-- required attribute -->
<input type="text" required>

<!-- disabled attribute -->
<input type="text" disabled>

<!-- readonly attribute -->
<input type="text" value="Can't edit" readonly>

<!-- maxlength attribute -->
<input type="text" maxlength="10">

<!-- target attribute -->
<a href="https://example.com" target="_blank">Open in new tab</a>
<a href="page.html" target="_self">Open in same tab</a>

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

<!-- rel attribute -->
<a href="https://example.com" rel="noopener noreferrer">External Link</a>