How to use HTML Attributes

Learn how to use HTML attributes, by looking at some of the most commonly used attribute names and values.

What are HTML Attributes?

In HTML, attributes are modifier tools used to add extra information to HTML elements or to change their default (out of the box) behavior.

An HTML element with no added attributes looks like this:

<tag>Content</tag>

HTML elements with attributes are defined like this:

<tag attribute="value">Content</tag>

With that model in mind, let’s look at some practical attribute examples.

The href Attribute

The href attribute is one of the most important attributes in HTML.

href is used for specifying URLs for:

• Hyperlinks (also just called “links”).
• Or for importing external resources, such as styles and scripts.

The most common use case for href is to add link URLs on the anchor element <a>:

<a href="url-path">Link text</a>

These links allow users to click their way from page to page, either internally (on the same website/domain), or externally (to other website domains).

Internal link

Internal links use a relative path:

<a href="/">Home</a>

As a standard, "/" leads to the front page on any website, which is the index.html page.

If you have apage called About and a corresponding HTML document called about.html, you can internally link to it like this:

<a href="/about">About</a>

This link leads to TechStacker’s About page

External link

Exernal links need an absolute path:

<a href="https://www.youtube.com">Go to YouTube.com</a>

The target Attribute

While we’re working with the anchor element, let’s take a look at another important anchor element attribute, the target attribute.

The target attribute specifies where to open links when users click on them.

For example, if you click on the external link below you’ll be taken to YouTube.com in the same browser tab window you’re in right now:

<a href="https://www.youtube.com/">Go to YouTube.com</a>

Go to YouTube.com

This happens because by default <a> elements have a target attribute with a value of _self — which means that it opens the href link value in the same window the user is in.

So this link element:

<a href="https://www.youtube.com/"></a>

Is read by the computer/browser like this:

<a href="https://www.youtube.com/" target="_self"></a>

But what if you want links to open in a new browser tab?

No problem, you can override the default _self value with the _blank value:

<a href="https://www.youtube.com" target="_blank" rel="noopener"
  >Go to YouTube.com (opens in a new tab)</a
>

Now the YouTube link will open in a new browser tab:

Go to YouTube.com (new tab)

Read more about the anchor/link element.

Attributes without values

An attribute usually consists of an attribute name and an attribute value, such as in the anchor element example.

However, sometimes the value (behavior) is built-in to the attribute name.

For example, the defer attribute to modify the HTML <script> element:

<script defer src="app.js"></script>

Notice that the defer attribute doesn’t have an assignment operator (=) or value because its behavior is built-in.

defer is a so-called boolean attribute. Booleans are used for a type of data that can only have two values, true or false (or enable/disable).

Let’s look take a closer look at the defer attribute.

This <script> element, without the defer attribute, will execute its src JavaScript code from the app.js value as soon as the browser has loaded it:

<script src="app.js"></script>

That‘s the default behavior of the script element.

But when you add defer to the <script> element you disable that default behavior:

<script defer src="app.js"></script>

Now, the JavaScript code won’t execute until the entire page is finished loading.

To beat the dead horse:

• Without defer, JavaScript executes as soon as it as it’s loaded.
• With defer JavaScript waits to execute until the entire HTML page is loaded.

If attributes confuse you, don’t worry, it always makes 10x more sense once you start using them in practice.

Custom attributes

You can also create custom attributes, which you can then control with JavaScript. Custom attribute names have to be preceded by a data- label:

<tag data-custom-attribute-name="value">Content</tag>

For example, let’s say we have a food element called “Apple”. When a user clicks on it, we want to display what type of food it is in a popup dialog box.

To do that we’ll create a custom attribute called food-type (remember the data- label) and add it to a <div> element with the Apple text inside:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

And the JavaScript that makes the feature work:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

Here’s a demo.

How the HTML code works:

• First, we added an onclick attribute to the <div> element. This is an event attribute that attaches an event listener that listens for... you guessed it, clicks!
• Then we assign an attribute value of showDetailsBox(this) to the onclick attribute.
• showDetailsBox() is the name of the JavaScript function that gets called as soon as you click on the Apple text element.
• The this part of (this) is an argument that refers to the object it belongs to (this is a bit advanced for beginners, it’s okay if don’t understand it).
• id is a built-in HTML attribute used to specify a unique id for HTML elements. In this case, our unique id is apple.

How the JavaScript code works is beyond the scope of this HTML tutorial, so I’ll give you a simplified explanation:

When the showDetailsBox() function is called by the onclick event attribute, it executes its code block { ... } contents:

function showDetailsBox(food) {
  ...
}

On the first line inside the code block, JavaScript selects any HTML element with the custom data-food-type attribute, and assigns it (and its attribute value) to a variable called foodType:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

On the second line we run the built-in alert() method (that prompts the popup dialog box and tell it to display the value of foodType which is of course, fruit:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

Don’t worry if you don’t completely understand the entire code example above, there’s a lot to digest, especially for a beginner. With practice, it will make sense!

For more extensive information about HTML attributes, I recommend digging through MDN web docs HTML attribute reference.