Attributes add extra information to an element — they live inside the opening tag as name-value pairs.
Syntax
<tagname attribute="value">content</tagname>Example
<a href="https://codingnowai.in" target="_blank" rel="noopener">
Visit CodingNow
</a>This anchor has three attributes: href (destination), target (open in a new tab), and rel (security relationship — see rel attribute).
Common Attribute Categories
| Type | Examples |
|---|---|
| Universal / global | id, class, style, title — usable on almost any element. See Global Attributes. |
| Element-specific | href (only on <a>), src (only on <img>/<video>/etc.) |
| Boolean | disabled, required, checked — presence alone means "true" |
| Custom | data-* attributes — see Data Attributes |
Boolean Attributes — A Common Point of Confusion
<!-- Correct: presence alone disables the button -->
<button disabled>Submit</button>
<!-- Also correct, but the value is ignored either way -->
<button disabled="disabled">Submit</button>
<!-- WRONG assumption: this does NOT enable the button -->
<button disabled="false">Submit</button>Boolean attributes don't check their value — only whether they're present at all. disabled="false" still disables the button, which surprises almost everyone the first time.
Quoting Values
Always quote attribute values, even when HTML5 technically allows omitting quotes for simple values. It's required the moment a value contains a space, and consistent quoting avoids bugs entirely.
Common Mistakes
- The boolean-attribute trap above (
disabled="false"still disabling the element) - Forgetting quotes around attribute values that contain spaces
- Using the wrong attribute for the element (e.g.
hrefon an<img>instead ofsrc)
Interview Relevance
Q: "Does disabled="false" enable a button?" No — a favorite trick question testing whether you understand boolean attributes correctly.
Practice Question
Write an <input> element that is required, has a placeholder of "Enter your email," and is of type email.
