HTML Attributes

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 behavior, style, content, or other characteristics of an element.

Attributes are always written in the form of name=”value” in the tag, where name is the name of the attribute and value is the value of the attribute.

HTML attributes

• HTML elements can set attributes
• Attributes can add additional information to an element
• Attributes are usually described in the opening tag
• Attributes always appear as name/value pairs, for example: name=”value” .

Property Examples

HTML links are defined by the <a> tag. The link’s address is specified in 
the href attribute :

<a href="https://www.it-res.com">This is a link</a>

HTML attributes commonly used to reference attribute values

Attribute values should always be enclosed in quotes.

Double quotes are most commonly used, but single quotes can also be used.

Use double quotes:

<a href="https://www.it-res.com">Link</a>

Use single quotes:

<a href="https://www.it-res.com">Link</a>

属性值包含引号： Link

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

或者：

<a href="https://www.it-res.com/?s='search'">Link</a>

HTML Tip: Use lowercase attributes

Attributes and attribute values are not case sensitive.

However, the World Wide Web Consortium recommends lowercase attributes/attribute values in its HTML 4 recommendation.

Newer versions of (X)HTML require lowercase attributes.

HTML Attribute Reference

For a complete list of HTML attributes, see HTML Tag Reference .

The following are the attributes that apply to most HTML elements:

Global properties

Global attributes are attributes that are available to all HTML elements.

id : Specifies a unique identifier for the element.

<div id="header">This is the header</div>

class : Assign one or more class names to the element for selection by CSS or JavaScript.

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

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

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

title : Provides additional tooltip information for an 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 a specific element

Some attributes apply only to specific HTML elements.

href(For <a>the and <link>elements): Specifies the link’s target URL.

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

src(For 
<img><div>, 
<script></div>, 
<iframe>etc. elements): Specifies the URL of an external resource.

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

alt (for elements): Provides alternative text for an image, to be displayed if the image cannot be displayed.

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

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

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

value(For elements such as 
<input>, 
<button>, 
<option>etc.): Specifies the initial value of the element.

<input type="text" value="Default Value">

disabled (used 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 check box or radio button is selected.

<input type="checkbox" checked>

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

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

target(For the 
<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 properties

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 that the input field is required.

<input type="text" required>

autoplay(For 
<audio>the and 
<video>elements): Play the media automatically.

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

Custom properties

HTML5 introduces data-* attributes, allowing developers to define custom attributes to store additional data.

data-* : Used to store custom data, usually accessed through JavaScript.

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

Event Handling Properties

HTML elements can respond to specific events, such as click, mouse hover, etc., through event handling attributes.

onclick : Fired when the user clicks the element.

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

onmouseover : Fired when the user hovers the mouse over an element.

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

onchange : Triggered when the value of an element changes.

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

For more information about standard attributes, see HTML Standard Attribute Reference .