Attributes
Attribute syntax
- All HTML elements can have attributes
- Attributes provide additonal information about elements
- Always specified in the start tag
- Element attributes are normally made up of key and value, e.g.
class="large" - However, they can be used with no value e.g.
<input disabled>
Always use quotes
You can write the value of an attribute without quotes, but this is not best practice as a space will break the value
It's up to you whether to use single ' or double " quotes.
Most projects will use double quotes.
Wrong
<p class=bigtext>Content goes here...</p>Correct
<p class="bigtext">Content goes here...</p>Common attributes
| Attribute | Description | Example |
|---|---|---|
| id | This value must be unique on the page. Used for CSS, internal page linking and JavaScript | <div id="one"></div> |
| class | Used to style elements with common properties. Can contain multiple class names in the value (space separated) | <p class="large"></p> |
| src | Used on embedded content elements. Is the URL path of content, e.g. image | <img src="/path/to/image.png"> |
| href | The URL of a linked resource. Most commonly used on anchor tags to navigate | <a href="index.html"></a> |
| type | Defines the type of element. Commonly used on inputs and buttons | <input type="password"> |
| for | Describes the form element which has an id value matching this for value | <label for="firstname"></label> |
| hidden | Hides the given element from the user, but keeps element in the DOM | <p hidden></p> |
| data-* | Allows custom data to be attached to the HTML element. Useful when combined with JS | <div data-name="iain"></div> |
Full reference at MDN Web Docs: HTML attribute reference