HTML Attributes

HTML Attributes define additional characteristics about an element. Attributes are placed inside the element‘s opening tag. An element can have any number of attributes.

HTML Tutorial

Example

Two <input> elements with type attributes.
The attributes creates two very different input controls: a text field and a button.

<input type="text">
<input type="button" value="Button">

Attribute Syntax

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.
  • Attribute values are set between single quotes (') or double quotes (").
  • Examples include  id,  style,  class,  namehref,  etc.

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>

Next, we'll review some common attributes.

HTML href Attribute

The href attribute defines a link address for an <a> tag.

Visit Google
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 more information about href attribute, see our HTML <a> href reference.


HTML src Attribute

The src attribute on an <img> element specifies the source file (url) for the image.

<img src="/img/html/vangogh.jpg" />

For more information about src, see our HTML <img> src reference.


HTML width and height Attributes

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 more information about width and height, see our HTML width and HTML height reference guides.


HTML alt Attribute

The alt attribute specifies the alternative text to be displayed if the image cannot be loaded.
In this example the image name is misspelled.

Van Gogh, Self-portrait
<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 more information about alt, see our HTML <img> alt attribute reference.


HTML style Attribute

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 more information about style, see our HTML style attribute reference.


HTML lang Attribute

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 more information about lang, see our HTML lang attribute reference.


HTML title Attribute

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 more information about title, see our HTML title attribute reference.


Did you know?

Did you know?

Custom data-* attributes

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>
Note:  Custom data-* attributes are not displayed by the browser.

For more information about data-* attributes, see our HTML data-* attribute reference.


Attribute List

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.


You may also like

Guides