Attributes provide features or functionality to an element.
Attributes are placed inside the element's opening tag.
An element can have any number of attributes.
This example has 2 <input> elements with type attributes. The different attribute values create 2 totally different input controls: a text field, and a button.
<input type="text">
<input type="button" value="Submit">
For details on type attribute, see our HTML <input> type reference.
Attributes have two parts: a name and a value.
<element name1='value1' name2='value2'> ... </element>
<element> is the HTML element.name1 and name2 are the attribute names.value1 and value2 are the attribute values.A paragraph element with 3 attributes: id, class, and style.
<p id='p1' class='color-teal' style='font-size:16px;'> Paragraph with three attributes. </p>
For a list of all attributes, see our HTML Attribute List.
Next, we'll review some common attributes.
The href attribute defines a link address for an <a> tag.
Visit <a href="https://www.google.com" target="_blank">Google</a>
Note: The target attribute indicates that the page will appear in a new tab or window.
For details on href attribute, see our HTML <a> href reference.
The src attribute on an <img> element specifies the source file (url) for the image.
<img src="/img/html/vangogh.jpg" />
For details on src, see our HTML <img> src reference.
The width and height attributes define the size of an HTML element.
<img src="/img/html/vangogh.jpg" width="130" height="180"/>
Tip: Image height and width can also be specified with CSS.
For details on width and height, see our HTML width and HTML height reference guides.
The alt attribute specifies the alternative text to be displayed if the image cannot be loaded.
In this example the image name is misspelled.
<img src="/img/html/vangooch.jpg" alt="Van Gogh, Self-portrait" />
Tip: Always include an alt with your <img> tags in case the image has an error. This will also help with SEO (search engine optimization).
For details on alt, see our HTML <img> alt attribute reference.
The style attribute changes the appearance of an HTML element, such as, color, font, and size.
This text has been styled.
<p style="color:royalblue;font-style:italic;background:lavender;">
This text has been styled.
</p>
For details on style, see our HTML style attribute reference.
The <html> element has a lang attribute which specifies the document language.
This example sets the document language to English US.
<html lang="en-US">
For details on lang, see our HTML lang attribute reference.
The title attribute adds extra information to an element.
Its value displays as a tooltip when hovering the mouse over the element.
Here's a title attribute on a <span> element.
Move your mouse over the text and a tooltip will appear.
Your order has shipped.
<p title="Order number: 831001">Your order has shipped.</p>
Tip: Tooltips are an easy way to give the user some extra information about an icon, a button, an image, etc.
For details on title, see our HTML title attribute reference.
Custom attributes can be applied to any HTML element using the data-* attribute. They store hidden values commonly used by JavaScript to create a more engaging user experiences.
A data-* attribute consists of an attribute name and an
attribute value. The attribute name must be lowercase and at least
one character long after the data- prefix.
Custom data-id and data-price attributes.
<ul data-type="products"> <li data-id="3" data-price="$9.59">Aniseed Syrup</li> <li data-id="5" data-price="$3.39">Chef Anton's Gumbo Mix</li> <li data-id="29" data-price="$12.79">Thüringer Rostbratwurst</li> </ul>
For details on data-* attributes, see our HTML data-* attribute reference.
Some commonly used HTML attributes:
| Attribute | Description | |
|---|---|---|
| id | Set a unique identifier for the element. | |
| class | Sets one or more CSS classes to be applied to the element. | |
| style | Sets the style for the element. | |
| data-* |
Defines additional data that can be used by JavaScript. |
|
| hidden | Specifies whether the element is hidden. | |
| title | Sets a title that displays as a tooltip when element is hovered. | |
| href | Sets the URL for a link | |
| src | Sets the URL for an image | |
| alt | Alternative text for an image if the image cannot be displayed | |
| type | Used in input elements. Specifies input type (text, radio, and others) | |
| value | Used in input elements. Specifies the initial value of the element | |
| disabled | Specifies that an input element is disabled |
Note: The global attributes are marked with a global icon These attributes don't belong to a specific element and can be applied to any element.
