Lesson 6: Attributes

Attributes give HTML its flexibility and power. They sit inside the opening tag as space-separated key-value pairs, defining how an element behaves, styles, or links to other resources.

Attributes control element behavior, connections, and functionality. Some attributes are global, which means they can go on any tag. Others apply only to specific elements. Most attributes need a value, but boolean attributes do not. We also have attributes which take a specific list of keyword values.

Quoting attribute values is not always strictly required, but you should do it anyway. It keeps your markup clean and prevents issues when values contain spaces.

HTML tags and attributes do not care about capital letters, but some custom names you create do. For example, if you create an ID named myId, you must use exactly myId with the capital I when you target it in your CSS styles or JavaScript scripts. The standard parts of HTML, like type="text", do not care about capital letters.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text" />
<input type="TeXt" />

<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
  <div id="MyID"></div>
</div>

Boolean attributes#

If a boolean attribute is present on a tag, it is active. You do not need to provide a value. If you omit the attribute entirely, it is inactive. Examples include checkmarks, disabled states, and required flags.

Boolean values can be omitted, set to empty strings, or set to the name of the attribute. Even invalid values like a smiley face emoji will resolve to true.

These three tags do the exact same thing.

<input required />
<input required="" />
<input required="required" />

If the attribute is false, omit it from the tag. If it is true, write it without a value.

Other web formats, like SVG images, always require values for every attribute. But in regular HTML, you can just write the name of the boolean attribute.

Attributes with fixed choices#

Some attributes have a specific list of allowed values that you can choose from. These are called enumerated attributes. If you add the attribute but leave the value blank, the browser will fall back to a default choice.

For instance, if you add contenteditable without a value, the browser assumes you meant contenteditable="true". If you omit it entirely, it defaults to inherit.

Unlike boolean values, attributes do not automatically resolve to true if present. If you set contenteditable="false", the element is not editable.

Most of the time, missing values and invalid values fall back to the same default. If you mess up the type on an input or leave it blank, you get a text input. Check the docs on MDN to be sure.

Global attributes#

Global attributes can go on any HTML element, even tags in the head. There are over thirty of them, though some will not do anything on certain elements. Adding hidden to a meta tag is useless because metadata does not render anyway.

id#

The global ID attribute gives an element a unique name on the page. We use IDs to link to different parts of the page, connect form labels, style elements, or target them in code.

Keep ID values simple. Avoid spaces, emoji, and dots. Stick to regular letters, numbers, hyphens, and underscores, and start the name with a letter.

IDs must be unique on the page. Two elements should never share the same ID. Duplicate IDs will confuse the browser and break your links or scripts.

Linking to sections on a page#

You can point links to specific sections on the same page using IDs. We call these anchor links.

<nav>
  <a href="#reg">Register</a>
  <a href="#about">About</a>
  <a href="#teachers">Instructors</a>
  <a href="#feedback">Testimonials</a>
</nav>

When a URL ends with a hash followed by a string, the browser looks for an element with that ID. If it finds one, it scrolls that element into view.

These links point to sections identified by their ID attributes. When a user clicks a link, the matching section scrolls into view.

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

The browser also gives us a free link to the top of the page. Setting the href attribute to a hash will scroll the user to the top automatically.

The hash symbol # tells the browser that you are linking to an ID on the page instead of opening a brand new webpage.

Styling with IDs#

You can use IDs in your styles (CSS) to target a specific element and change its look. For example, using #feedback in CSS will let you style only the element with the ID feedback.

Code interaction#

If you want to use code (like JavaScript) to make your page interactive, you will use the element’s ID to tell the computer which element you want to change. Code can use the ID to find the element, like this:

const myButton = document.getElementById("switch");

Labels#

The label element uses the for attribute to hook into the ID of a form input. This links them together for screen readers and makes the label text clickable.

<label for="minutes">Send me a reminder</label>
<input type="number" name="min" id="minutes" />

You can also wrap the input inside the label. If you do this, you do not even need to use for or id attributes because the browser knows they are connected.

<label>
  Send me a reminder <input type="number" name="min" /> before the workshop
</label>

This is great for usability. Clicking the label focuses the input. It makes tapping small checkmarks or radio buttons on mobile much easier.

<fieldset>
  <legend>Question 5: Which color do you prefer?</legend>
  <ul>
    <li>
      <input type="radio" name="q5" value="blue" id="q5blue" />
      <label for="q5blue">Blue</label>
    </li>
    <li>
      <input type="radio" name="q5" value="green" id="q5green" />
      <label for="q5green">Green</label>
    </li>
  </ul>
</fieldset>

When styling radio buttons, group the related choices inside a fieldset tag and use a legend tag to label the whole set.

Helping screen readers#

We also use IDs to help screen readers, which are tools that read web pages out loud for visually impaired users. Special attributes starting with aria- use IDs to tell screen readers how different parts of the page connect.

<section id="about" aria-labelledby="about_heading">
  <h2 id="about_heading">What you will learn</h2>
</section>

For example, aria-labelledby tells the screen reader to use the text inside the heading with the ID about_heading as the label for the entire section.

class#

The class attribute is how we target elements in CSS and JavaScript. It takes a space-separated list of names.

Before you add classes to everything, see if you can use standard HTML elements first. You can often write styles for your elements based on how they are nested in the page, without needing extra class names.

The workshop site hasn’t used any classes yet. We will see if we can launch it without a single class name.

style#

The style attribute lets you write CSS inline on a single element. It uses the same property-value syntax as CSS stylesheet blocks.

I do not recommend inline styles for production. They make maintenance a pain and do not support media queries or animations. Use them for quick testing, then move the styles to a real CSS file.

tabindex#

The tabindex attribute controls keyboard focus. It takes an integer value.

A value of 0 makes an element focusable in the natural page order. A negative value like -1 lets you focus the element with code, but prevents users from tabbing to it. Avoid values of 1 or higher because they override the natural order and make using the keyboard frustrating.

On this page, we have a custom share action button. We add a tabindex of zero to make it keyboard focusable.

<share-action
  authors="@estellevw"
  data-action="click"
  data-category="web.dev"
  data-icon="share"
  data-label="share, twitter"
  role="button"
  tabindex="0"
>
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

The button role informs screen reader users that this element should behave like a button. We use code to handle key presses and clicks on this element.

Inputs, links, and buttons are focusable by default. Adding the tabindex attribute to other elements enables them to receive focus when they otherwise would not.

Altering the tabbing order can create a bad user experience. It makes it difficult to rely on keyboard navigation or assistive technology.

<p>Click in any input, then hit the tab key.</p>
<ol>
  <li><input tabindex="3" value="3" /></li>
  <li><input tabindex="6" value="6" /></li>
  <li><input tabindex="2" value="2" /></li>
  <li><input tabindex="0" value="0" /></li>
  <li><input tabindex="0" value="0" /></li>
  <li><input tabindex="-1" value="-1" /></li>
  <li><input tabindex="0" value="0" /></li>
  <li><input tabindex="8" value="8" /></li>
  <li><input tabindex="1" value="1" /></li>
  <li><input tabindex="5" value="5" /></li>
  <li><input tabindex="7" value="7" /></li>
  <li><input tabindex="4" value="4" /></li>
</ol>

role#

The role attribute comes from the ARIA spec. It tells screen readers how an element should behave when there is no native HTML equivalent.

For example, a custom tab widget might use role values like tab, tablist, and tabpanel to signal how to navigate panels instead of performing a normal button action.

Roles do not change browser behavior or keyboard interaction. Adding role="button" to a span does not make it focusable or clickable. Use native semantic elements whenever you can.

contenteditable#

Setting contenteditable="true" makes an element editable and focusable. It is an attribute with allowed choices, so it defaults to inheriting from its parent if you leave it blank or use an invalid value.

These three opening tags are equivalent.

    <style contenteditable>
    <style contenteditable="">
    <style contenteditable="true">

You can toggle this state using JavaScript, which is useful when building text editors or interactive pages.

Global attributes can be applied to all elements, even style elements. You can use attributes and a bit of CSS to make a live CSS editor.

Try changing the color of the style to something other than inherit. Then try changing the style to a p selector. Do not remove the display property or the style block will disappear.

Custom attributes#

If you need to store extra information on your tags, use custom data attributes. These attributes always start with the data- prefix followed by lowercase letters.

Browsers ignore these custom attributes, but you can read them in your code later when making the page interactive.

<blockquote
  data-machine-learning="workshop"
  data-first-name="Blendan"
  data-last-name="Smooth"
  data-formerly="Margarita Maker"
  data-aspiring="Load Balancer"
  data-year-graduated="2022"
>
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

For example, you could write <div data-user-id="1234">. This stores the user’s ID on the tag so your code can easily look it up later.

Now we have covered global attributes. Next, we will check out element-specific attributes like target and href as we look into links.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).