A Step-by-Step Guide to HTML Attributes

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.

What are HTML attributes, and how do you use them? 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=value.

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.

What are HTML Attributes?

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 href attribute.

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 HTML

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'>

How to Use HTML Boolean Attributes

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, type and 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.

How to Use 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.

HTML id Attribute

The id attribute gives an element a unique identifier. The id attribute itself does not affect how an HTML element appears, but it allows you to select a specific element to manipulate when you’re working with CSS or JavaScript.

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> tag:

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

HTML title Attribute

The HTML 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:

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

HTML style Attribute

The HTML 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 gray.

Element-Specific HTML Attributes

There is a wide range of other attributes you may encounter which are specific to an element. Here are a few examples:

img src

<img src="source.png">

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

<a href="https://careerkarma.com/">Career Karma homepage</a>

The 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 alt

<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 in HTML can be read by screen readers, so someone who is visually impaired who depends on screen readers can still understand our webpage.

How to Use HTML Attributes: Conclusion

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 know how to use attributes in HTML.