In HTML, attributes provide extra information about elements.
They are always written inside the opening tag and usually in the format:
attribute="value"
Example:
<a href="https://example.com">Visit Example</a>
Here:
href→ Attribute namehttps://example.com→ Attribute value
1. General Rules of Attributes
- Always in the opening tag.
- Usually in name=”value” format.
- Most values are in quotes (single or double quotes, double is preferred).
- Case-insensitive, but lowercase is standard in HTML5.
2. Common HTML Attributes
| Attribute | Used With | Description |
|---|---|---|
id | Any element | Unique identifier for the element. |
class | Any element | Used to apply CSS styles or JavaScript actions. |
style | Any element | Inline CSS styling. |
title | Any element | Tooltip text on hover. |
lang | <html> | Specifies language of the page. |
src | <img>, <script> | URL of image or script. |
href | <a>, <link> | URL of link or resource. |
alt | <img> | Alternate text if image fails to load. |
width / height | <img>, <video> | Dimensions of element. |
type | <input>, <button>, <script> | Specifies input type, button type, or script type. |
value | <input>, <option> | Initial value of the element. |
placeholder | <input>, <textarea> | Hint text inside the field. |
disabled | Form elements | Makes element non-editable. |
readonly | Form elements | Makes element non-editable but selectable. |
checked | <input type="radio">, <input type="checkbox"> | Pre-selects an option. |
selected | <option> | Pre-selects an option in a dropdown. |
autoplay | <audio>, <video> | Starts media automatically. |
controls | <audio>, <video> | Shows media controls. |
loop | <audio>, <video> | Repeats media. |
required | Form elements | Makes a field mandatory. |
3. Example – Multiple Attributes
<img
src="logo.png"
alt="Company Logo"
width="200"
height="100"
title="Our Company Logo">
4. Boolean Attributes
Some attributes don’t need a value — their presence alone turns them on.
Example:
<input type="checkbox" checked>
<input type="text" disabled>
5. Best Practices
- Use lowercase for attribute names.
- Use double quotes for values.
- Keep attribute values short and meaningful.
- Always include
altfor images (for accessibility and SEO).
