HTML attributes define additional properties for HTML elements. They are specified in the opening tag of an HTML element, and some elements require an attribute to function.
When you’re learning HTML, you may encounter the term
attributes. Attributes are used to provide additional information about a specific element on an HTML page.
Attributes are specified in the opening tag of an HTML document and are usually specified in a name/value pair. For instance, an attribute called
name with the value
value would appear like this: name=
This tutorial will discuss, with reference to examples, the basics of attributes in HTML and why they are used. We will also discuss a few of the general-purpose attributes which apply to most elements in HTML, and which you are most likely to encounter when you’re coding.
Every element in the HTML markup language can have an attribute, which is used to define an additional property held by that element.
For instance, we may want to specify an attribute that defines the height of an image or the value stored by a form element. These attributes are specific to the element, which means that they can be used to customize how a certain element works on a web page.
In some cases, attributes are required for an element. For example, if you are working with an
<a> HTML tag, you need to define a
href attribute so that the tag knows which URL to which it should point when clicked.
There are two components to an attribute in HTML:
- name defines the name of the attribute you are creating.
- value defines the value held by the attribute.
Suppose we wanted to define a link that points to the Career Karma website home page. To do so, we can use an
<a> tag in HTML. However, if we want the tag to link to the Career Karma homepage, we also need to use a
Here’s an example of an
<a> tag which links to the Career Karma homepage:
<a href="https://careerkarma.com/">Career Karma</a>
This tag uses an attribute called
href and assigns it the value “https://careerkarma.com/”, which is the URL of the Career Karma homepage.
Attributes in HTML are case insensitive, but attributes are usually written in lower case
Single and Double Quotes
When you’re assigning a value to an attribute, you can use both single and double quotes. Using double quotes is the most common approach (and is the one we used in our example earlier). However, the approach you use depends on the contents of your attribute.
Suppose we are creating a form element that has the value
John ‘Rocketman’ Smith. In this case, because our value contains single quotes, we should use double quotes for our attribute name. Here’s the code we would use to declare this attribute:
<input type="text" value="John 'Rocketman' Smith">
On the other hand, suppose our value contained double quotes and was instead
John “Rocketman” Smith. In this case, we would want to use single quotes to define our attribute. Here’s the code we would use:
<input type="text" value='John "Rocketman" Smith'>
Some attributes do not use the name/value pair structure. We refer to these as boolean attributes. These attributes can only have a true-false value, and their value is set to true if they are specified and false if they are not specified.
Boolean attributes are commonly used in HTML forms. Suppose we are creating a form field that asks a user for their name. We want this form field to be mandatory by default. We could use the
required boolean attribute to accomplish this task:
<input type="text" value="Name" required>
In this example, we have defined an input tag that has three attributes. The first two attributes,
value, use the name/value structure. The third attribute,
required, is a boolean attribute. Because we have specified the
required boolean attribute, its value is set to true.
Standard HTML Attributes
There are a few HTML attributes which apply to every element in HTML. These are called global attributes.
You are likely to encounter these throughout a webpage, so it’s important that you know what they are and how they work. Let’s walk through four of the most common standard HTML attributes applied to elements.
The id you assign any given element should be unique in a document.
Here’s an example of the id attribute used in a
<p id="secondParagraph">Hello, there! Welcome to my site.</p>
In this example, we have assigned our
<p> tag an id attribute with the value
The title attribute is often used to explain an element or its content. The value stored within a title attribute is displayed as a tooltip which appears when a user hovers over the element with their cursor.
Suppose we have an input field that collects a user’s name. We want to show
This field is required when the user hovers over the field. We could accomplish this goal using the following code:
<input type="text" title="This field is required">
When we hover over the text field, the following tooltip appears:
The style attribute is used to specify CSS styles for a particular element. This approach of styling an element is referred to as creating an inline style.
Suppose we are creating a paragraph of text that we want to appear in gray. We could use the style attribute to specify the color of our text. Here’s the code we could use to accomplish this task:
<p style="color: gray;">Hello, there! This is my website.</p>
Here’s the output of our code:
As you can see, the color of our text has changed to gray. This is because we specified a style attribute and changed the
color style to be equal to
There is a wide range of other attributes you may encounter which are specific to an element. Here are a few examples:
In this example, we have specified the src attribute. This attribute is used with the
img tag to point to the file the tag should render on the webpage.
<a href="https://careerkarma.com/">Career Karma homepage</a>
href attribute is used in this example to tell the
<a> tag which site to direct the user to when the link is clicked.
<img src="source.png" alt="Image of a book">
In our code, we have specified the
alt attribute. This attribute is specific to the img tag and specifies the alternative text which is processed by the webpage if an image cannot be displayed.
The alt attribute can be read by screen readers, so someone who is visually impaired who depends on screen readers can still understand our webpage.
Attributes are additional properties applied to a specific element in HTML. Attributes are always specified in an element’s opening tag and usually use name/value pairs.
This tutorial walked through, with reference to examples, the basics of attributes in HTML, boolean attributes, a few standard HTML attributes, and some element-specific attributes. Now you’re ready to start using attributes in HTML like a pro!