What Are Attributes?
Attributes provide extra information about an element. They are always specified in the opening tag as name/value pairs, in the form name="value".
Attribute Syntax
<a href="https://example.com" target="_blank">Visit Example</a>
<img src="logo.png" alt="Company logo" width="120" />Common Global Attributes
| Attribute | Purpose |
|---|---|
| id | Uniquely identifies a single element on the page |
| class | Assigns one or more class names for styling/scripting |
| style | Applies inline CSS directly to the element |
| title | Shows a tooltip when hovering the element |
| lang | Declares the language of the element’s content |
| hidden | Hides the element from the page |
Attributes Are Element-Specific
While global attributes work on almost any element, many attributes only make sense on specific elements — for example, href only applies to <a>, and src only applies to elements like <img>, <script>, and <video>.
Element-Specific Attributes
<input type="email" placeholder="you@example.com" required />
<video src="movie.mp4" controls></video>Boolean Attributes
Some attributes do not take a value — their mere presence turns a feature on. Examples include disabled, required, checked, and hidden.
Boolean Attributes Example
<input type="text" disabled />
<input type="checkbox" checked />Quoting Attribute Values
Attribute values should always be wrapped in double or single quotes. Unquoted values can work for simple cases but break as soon as the value contains a space.
id Must Be Unique
Unlike class, an id value must be unique within the entire page. Using the same id on multiple elements is invalid HTML and can break CSS selectors and JavaScript lookups.
Best Practice
Prefer class over id for styling, since classes are reusable across many elements. Reserve id for unique anchors, JavaScript hooks, or accessibility references like aria-labelledby.