What are HTML Attributes?

What You'll Learn

• What attributes are and how to use them
• Global vs element-specific attributes
• Boolean attributes

Understanding Attributes

Attributes provide additional information about HTML elements. They appear in the opening tag and usually come in name-value pairs like name="value".

Types of Attributes

Global Attributes

Work on any element:

• id - Unique identifier
• class - CSS class names
• style - Inline styles
• title - Tooltip text

Element-Specific Attributes

Only work on certain elements:

• src - For images and scripts
• href - For links
• type - For inputs

Boolean Attributes

Don't need a value - their presence enables the feature:

• disabled
• checked
• required
• readonly

Code Examples

<!-- Common attributes -->
<img src="photo.jpg" alt="Description" width="300">
<a href="https://example.com" target="_blank">Link</a>
<input type="email" id="email" class="form-input" required>

<!-- Global attributes -->
<div id="unique-id" class="card" style="color: blue;" title="Tooltip">
  Content
</div>

<!-- Boolean attributes -->
<input type="checkbox" checked disabled>
<button disabled>Can't click</button>