How to understand attributes

Attributes add information

Attributes appear in an opening tag. Most use a name and quoted value.

<a href="/courses/" class="button">Browse courses</a>
<img src="/images/map.png" alt="Map of the campus">
<input type="email" name="email" required>

Global and specific attributes

• Global attributes such as id, class, lang, and data-* work on many elements
• Specific attributes such as href, src, and type apply to particular elements
• Boolean attributes such as required, checked, and hidden are true when present

Use class, id, and data carefully

Classes can repeat. An ID must be unique and can connect labels, fragment links, and ARIA references. Store application-specific data in descriptive data-* attributes.

Follow modern practices

Quote values, use lowercase names consistently, and consult element documentation instead of inventing attributes. Avoid inline event handlers and inline styles in larger projects; separate JavaScript and CSS are easier to maintain.