HTML Attributes

Attributes are additional information provided by HTML elements.

Attributes usually appear in the start tag of an HTML tag, used to define the behavior, style, content, or other characteristics of the element.

Attributes are always written in the format name="value" within the tag, where **name** is the attribute name and **value** is the attribute value.

---

HTML Attributes

• HTML elements can set attributes
• Attributes can add additional information to the element
• Attributes are generally described in the start tag
• Attributes always appear as name/value pairs, such as: name="value".

---

Attribute Examples

An HTML link is defined by the <a> tag. The address of the link is specified in the href attribute:

Example

This is a link

Try it yourself »

---

Commonly Used Attribute Values in HTML

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="#">Link</a>

Using single quotes:

<a href="#">Link</a>

Attribute values containing quotes: Link

Note: In some special cases, if the attribute value itself contains double quotes, you must use single quotes, for example:

name='John "ShotGun" Nelson'

or:

<a href="#"search'">Link</a>

---

HTML Tip: Use Lowercase Attributes

Attributes and attribute values are case-insensitive.

However, the World Wide Web Consortium (W3C) recommends lowercase attributes/values in its HTML 4 recommendation standard.

Newer versions of (X)HTML require the use of lowercase attributes.

---

HTML Attribute Reference Manual

View the complete list of HTML attributes: HTML Tag Reference Manual.

The following are attributes applicable 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 the element, used for CSS or JavaScript selection.
style	All elements	Applies CSS styles directly to the element.
title	All elements	Provides additional information for the element, usually displayed as a tooltip when the mouse hovers over it.
data-*	All elements	Used to store custom data, typically accessed via JavaScript.
href	<a>, <link>	Specifies the target URL of the link.
src	<img>, <script>, <iframe>	Specifies the URL of an external resource (such as images, scripts, frames).
alt	<img>	Provides alternative text for an image, which is displayed when the image cannot be shown.
type	<input>, <button>	Specifies the type of input control (e.g., text, password, checkbox, etc.).
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 selected.
placeholder	<input>, <textarea>	Displays a hint text in the input field.
target	<a>, <form>	Specifies the target window or frame for a link or form submission (e.g., _blank opens in a new tab).
readonly	Form elements	Makes the input field read-only.
required	Form elements	Specifies that the input field is required.
autoplay	<audio>, <video>	Automatically plays the 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 value of the element changes.

Global Attributes

Global attributes are attributes that can be used with 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 the element, used for CSS or JavaScript selection.

<p class="text highlight">This is a highlighted text.</p>

style: Used to apply CSS styles directly to the element.

<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>

title: Provides additional information for the element, usually displayed as a tooltip when the mouse hovers over it.

<abbr title="HyperText Markup Language">HTML</abbr>

data-*: Used to store custom data, typically accessed via JavaScript.

<div data-user-id="12345">User Info</div>

Attributes for Specific Elements

Some attributes are only applicable to specific HTML elements.

href (for <a> and <link> elements): Specifies the target URL of the link.

<a href="https://www.example.com">Visit Example</a>

src (for <img>, <script>, <iframe>, etc.): Specifies the URL of an external resource.

<img src="image.jpg" alt="An example image">

alt (for <img> elements): Provides alternative text for an image, which is displayed when the image cannot be shown.

<img src="image.jpg" alt="An example image">

type (for <input> and <button> elements): Specifies the type of input control.

<input type="text" placeholder="Enter your name">

value (for <input>, <button>, <option>, etc.): 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 (for <input type="checkbox"> and <input type="radio">): Specifies whether a checkbox or radio button is selected.

<input type="checkbox" checked>

placeholder (for <input> and <textarea> elements): Displays a hint text in the input field.

<input type="text" placeholder="Enter your email">

target (for <a> and <form> elements): 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 Attributes

Boolean attributes do not require a value. Their presence indicates true, and their absence indicates false.

disabled: Disables the element.

<input type="text" disabled>

readonly: Makes the input field read-only.

<input type="text" readonly>

required: Specifies that the input field is required.

<input type="text" required>

autoplay (for <audio> and <video> elements): Automatically plays the media.

<video src="video.mp4" autoplay></video>

Custom Attributes

HTML5 introduced the data-* attributes, allowing developers to create custom attributes to store additional data.

data-*: Used to store custom data, typically accessed via 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 hover, etc., through event handling attributes.

onclick: Triggers when the user clicks the element.

<button onclick="alert('Button clicked!')">Click Me</button>

onmouseover: Triggers when the user hovers the mouse over the element.

<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>

onchange: Triggers when the value of the element changes.

<input type="text" onchange="alert('Value changed!')">

More standard attribute explanations: HTML Standard Attribute Reference Manual.