Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML Attributes

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.
  • 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.

For a list of all attributes, see our HTML Attribute List.

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="" 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.

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 details on 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 details on 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 details on 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.

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

For details on 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

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.