HTML Property
Attributes are additional information provided by HTML elements.
Attributes usually appear in the opening tag of an HTML tag and are used to define the element's behavior, style, content, or other characteristics.
Attributes always start withname="value"written inside the tag in the form ofnameis the name of the attribute,valueis the value of the attribute.
HTML Attributes
- HTML elements can be setProperty
- Attributes can be added to elementsAdditional information
- Attributes are generally described inStart tag
- Attributes always appear in the form of name/value pairs.For example: name="value"。
Attribute example
HTML links are defined by the <a> tag. The address of the link is in thehref attributeSpecified in:
HTML attributes commonly use quoted attribute values
Attribute values should always be enclosed in quotes.
Double quotes are the most common, but using single quotes is also acceptable.
using double quotes:
<a href="../index.html">Link</a>
using single quotes:
<a href='/index.html'>Link</a>Attribute values contain quotes:Link
Tip:In certain individual cases, such as when the attribute value itself contains double quotes, you must use single quotes, for example:
name='John "ShotGun" Nelson'Or:
<a href="../index.html'search'">Link</a>
HTML Tip: Use lowercase attributes
Attributes and attribute values are case-insensitive.
However, the W3C recommends lowercase attribute/attribute values in its HTML 4 recommendation.
However, newer versions of (X)HTML require lowercase attributes.
HTML Attribute Reference
View the complete list of HTML attributes:HTML Tag Reference。
The following lists attributes that apply to most HTML elements:
| Attribute name | Applicable elements | Description |
|---|---|---|
id | All elements | Specifies a unique identifier for the element. |
class | All elements | Specifies one or more class names for an element, used for CSS or JavaScript selection. |
style | All elements | Applies CSS styles directly on the element. |
title | All elements | Provides additional hint information for the element, usually displayed on mouse hover. |
data-* | All elements | Used to store custom data, usually accessed through JavaScript. |
href | <a>, <link> | Specifies the target URL of the link. |
src | <img>, <script>, <iframe> | Specifies the URL of an external resource (such as an image, script, or frame). |
alt | <img> | Provides alternative text for the image, displayed when the image cannot be shown. |
type | <input>, <button> | Specifies the type of the input control (e.g.text, password, checkboxetc.). |
value | <input>, <button>, <option> | Specifies the initial value of the element. |
disabled | Form elements | Disables the element, making it non-interactive. |
checked | <input type="checkbox">, <input type="radio"> | Specifies whether a checkbox or radio button is checked. |
placeholder | <input>, <textarea> | Displays hint text in the input box. |
target | <a>, <form> | Specifies the target window or frame for a link or form submission (such as_blankindicates a new tab). |
readonly | Form elements | Makes the input field read-only. |
required | Form elements | Specifies the input field as required. |
autoplay | <audio>, <video> | Autoplays media. |
onclick | All elements | Triggers a JavaScript event when the user clicks the element. |
onmouseover | All elements | Triggers a JavaScript event when the user hovers the mouse over the element. |
onchange | Form elements | Triggers a JavaScript event when the element's value changes. |
Global attributes
Global attributes are attributes that can be used by all HTML elements.
id: Specifies a unique identifier for the element.
<div id="header">This is the header</div>
class: Specifies one or more class names for an element, used for CSS or JavaScript selection.
<p class="text highlight">This is a highlighted text.</p>
style: Used to apply CSS styles directly on the element.
<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>
title: Provides additional hint information for the element, usually displayed on mouse hover.
<abbr title="HyperText Markup Language">HTML</abbr>
data-*: Used to store custom data, usually accessed through JavaScript.
<div data-user-id="12345">User Info</div>
Attributes of specific elements
Some attributes only apply to specific HTML elements.
href(used for<a>and<link>element): Specifies the target URL of the link.
<a href="https://www.example.com">Visit Example</a>
src(used for<img>, <script>, <iframe>etc. elements): Specifies the URL of an external resource.
<img src="image.jpg.html" alt="An example image">
alt (used for<img>element): Provides alternative text for the image, displayed when the image cannot be shown.
<img src="image.jpg.html" alt="An example image">
type(used for<input>and<button>element): Specifies the type of the input control.
<input type="text" placeholder="Enter your name">
value(used for<input>, <button>, <option>etc. elements): Specifies the initial value of the element.
<input type="text" value="Default Value">
disabled (for form elements): Disables the element, making it non-interactive.
<input type="text" disabled>
checked(used for<input type="checkbox">and<input type="radio">): Specifies whether a checkbox or radio button is checked.
<input type="checkbox" checked>
placeholder(used for<input>and<textarea>element): Displays placeholder text in the input box.
<input type="text" placeholder="Enter your email">
target(used for<a>and<form>element): Specifies the target window or frame for a link or form submission.
<a href="https://www.example.com" target="_blank">Open in new tab</a>
Boolean attribute
Boolean attributes are attributes that do not require a value; their presence means true, and their absence means false.
disabled: disables the element.
<input type="text" disabled>
readonly: Makes the input box read-only.
<input type="text" readonly>
required: Specifies the input field as required.
<input type="text" required>
autoplay(used for<audio>and<video>element): Automatically plays media.
<video src="video.mp4.html" autoplay></video>
Custom attributes
HTML5 introduceddata-*attributes, allow developers to define custom attributes to store extra data.
data-*: Used to store custom data, usually accessed through JavaScript.
<div data-user-id="12345" data-role="admin">User Info</div>
event handling attributes
HTML elements can respond to specific events, such as clicks, mouse hovers, etc., through event handler attributes.
onclick: Triggered when the user clicks the element.
<button onclick="alert('Button clicked!')">Click Me</button>
onmouseover: Triggered when the user hovers the mouse over the element.
<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>
onchange: Triggered when the value of the element changes.
<input type="text" onchange="alert('Value changed!')">
More standard attribute explanations:HTML Standard Attributes Reference.
other extensions