Attributes (Extra Info)
Overview
If HTML tags are the nouns (like a 'button' or an 'image'), then Attributes are the adjectives. They provide extra information and configuration to HTML elements.
For example, if you create an `<img>` tag, the browser will ask, 'Okay, but WHICH picture do I show?'. You use the `src` attribute to give it the image path. Attributes are ALWAYS written inside the Opening Tag.
1. Name-Value Pairs
Most attributes come in pairs. You write the name of the attribute, an equals sign `=`, and the value inside double quotes `""`.
<a href="https://google.com">Click to visit Google</a>
<img src="profile.png" width="200" height="200" />2. Boolean Attributes
Some attributes are so simple they don't need an equals sign or quotes. Just writing their name is enough. They act like an ON/OFF switch. For example, adding `disabled` to a button automatically turns it off.
<input type="text" placeholder="Optional name" />
<!-- This input is mandatory! -->
<input type="email" placeholder="Required Email" required />
<!-- This button cannot be clicked -->
<button disabled>Submit</button>Syntax
You can add as many attributes as you want to a single element. Just separate them with a space.
<input
type="password"
id="user-pass"
name="password"
placeholder="Enter your password"
required
/>Common Pitfalls
- Always use double quotes `""` for your attribute values. Missing quotes can break your layout.
- The `alt` attribute on an image is completely mandatory for accessibility. If an image fails to load, the `alt` text is shown instead.
Real-World Example
A link (anchor tag) that opens in a new tab using the `target` attribute.
<!-- target="_blank" tells the browser to open a new tab -->
<a href="https://instagram.com" target="_blank">
Visit my Instagram
</a>