Attributes provide additional settings to the browser on how an HTML element should behave.
Global Attributes
Global attributes are universal properties that can be used on any HTML element.
| Attribute | Purpose | Practical Example |
|---|---|---|
id | A unique identifier for a single element. | <div id="main-header"> |
class | A non-unique identifier used to group multiple elements. | <p class="text-blue"> |
style | Used to apply inline CSS directly to an element. | <h1 style="color: red;"> |
title | Provides extra info that appears as a tooltip on hover. | <abbr title="World Health Organization">WHO</abbr> |
lang | Defines the language of the element's content. | <p lang="fr">Bonjour</p> |
hidden | Prevents the element from being rendered. | <div hidden>You can't see me.</div> |
tabindex | Controls the order of elements when Tab is pressed. | <button tabindex="1"> |
data-* | Custom attributes used to store private data for scripts. | <div data-user-id="123"> |
Element-Specific Attributes
While global attributes are universal properties, element-specific attributes are the specialists. They only work on certain tags because they provide information that is unique to that tag's function. If you try to put a src attribute on a <p> tag, the browser will simply ignore it because a paragraph doesn't load external files.
Element-specific attributes are essential for their respective HTML element to do its job.
| Attribute | Associated Tag(s) | Purpose |
|---|---|---|
href | <a>, <link> | Specifies the URL of the page or resource. |
src | <img>, <script>, <iframe>, <video>, <audio>, <input type="image"> | Specifies the path to the media or file to be displayed. |
alt | <img>, <area> | Provides alternative text for accessibility. |
target | <a>, <form> | Defines where to open the link (e.g., _blank for a new tab). |
type | <input>, <button>, <link> | Defines the behavior of an input or the type of a resource. |
value | <input>, <option> | The actual data held by a form element. |
placeholder | <input>, <textarea> | Temporary hint text shown before the user types. |
action | <form> | The URL where the form data should be sent. |
rows / cols | <textarea> | Defines the physical size of a text area. |
Boolean Attributes
Boolean attributes are unique because they don't require a value like other attributes do. Their mere presence on an element represents the "true" or "on" state. If the attribute is missing, the state is "false" or "off."
| Attribute | Associated Tag(s) | Effect when Present |
|---|---|---|
disabled | <input>, <button>, <select> | The element is grayed out and cannot be interacted with. |
checked | <input type="checkbox/radio"> | The checkbox or radio button is selected by default. |
required | <input>, <select>, <textarea> | The form cannot be submitted unless this field is filled out. |
readonly | <input>, <textarea> | The user can see and copy the text, but they cannot change it. |
multiple | <input>, <select> | Allows the user to select more than one file or option. |
autoplay | <video>, <audio> | Requests that the media starts playing as soon as it is ready. Note that most modern browsers block autoplay with sound by default unless the media is muted or the user has previously interacted with the page. |
loop | <video>, <audio> | The media starts over again every time it finishes. |
hidden | All Elements | Technically a global attribute, but functions as a boolean to hide content. |