HTML Attributes

The picture shows that the attribute lives inside the start tag, between the tag name and the closing bracket. It never goes in the end tag, and it never goes in the content.

The link above needs one attribute. Many elements take several, separated by spaces, and their order does not matter. Here the bakery page gains a photo of its bread:

<img src="bread.jpg" alt="Three round loaves of sourdough bread on a wooden board" width="600" height="400">

The <img> element has four attributes. The image chapter explains images in detail; for now, read the attributes in the order the browser uses them:

1. src, short for "source", names the image file to load, here bread.jpg in the same folder as the page.
2. width and height give the image's size in pixels, so the browser can reserve the right amount of space on the page before the file arrives. Without them, the text below jumps down when the image appears.
3. alt, short for "alternative text", describes the image in words. A screen reader reads this text aloud, search engines read it to learn what the image shows, and the browser shows it in place of the image if the file cannot be loaded.

If you save this line without a file named bread.jpg, Chrome shows a small broken-image icon followed by the alt text, in the place where the image would have been. This is why alt should describe what the image shows, not just say "image".

Rules for Writing Attributes

Quote every value. Double quotes are usual, and single quotes also work. HTML allows a value with no quotes at all if it contains no spaces or special characters, but a missing pair of quotes causes mistakes that are hard to see:

<img src="bread.jpg" alt=Fresh bread width="600" height="400">

This line is wrong. Without quotes, the value of alt ends at the first space, so the browser reads alt as "Fresh" and treats the word bread as a second attribute with no value. The validator reports bread as an attribute that is not allowed. With alt="Fresh bread", both words stay in the value.

Use each attribute once per element. If the same name appears twice in one start tag, the browser keeps the first value, ignores the second, and the validator reports a duplicate attribute.

Write attribute names in lowercase. Like tag names, attribute names are not case sensitive, so HREF and href mean the same. Lowercase is the usual practice.

Use only names that HTML defines. Each element accepts a specific set of attributes. If you invent a name such as color="brown", the browser keeps it but does nothing with it, and the validator reports it as an error. The one exception is the family of names that start with data-, such as data-price="3.50", which HTML reserves for a site's own information, usually read by JavaScript.

Attributes That Work on Every Element

Some attributes, such as href and src, belong to particular elements. Others, called global attributes, can be used on any element. Four of them appear often:

• id gives an element a name that is unique on the page, such as id="opening-hours". Links can jump to it, and CSS and JavaScript can find it. Two elements on the same page must never share an id.
• class puts an element into a named group, such as class="price", so that CSS can style every element of that group the same way. Many elements can share a class, and one element can have several classes separated by spaces.
• lang states the language of one element when it differs from the language of the page.
• title adds extra information about an element, which some browsers show as a small box, called a tooltip, when the mouse rests on the element.

Here is lang on the bakery page, which greets French-speaking visitors in French:

<p lang="fr">Bienvenue chez Maya. Le pain sort du four à 7 heures.</p>

Because of lang="fr", a screen reader reads this paragraph with French pronunciation instead of reading French words as if they were English. The rest of the page stays English, from the lang="en" on the <html> element.

The title attribute needs more care. A tooltip appears only when a mouse rests on the element, so people who use a touch screen or only a keyboard never see it, and screen readers do not announce it consistently. Use title only for extra information that the reader can do without, and never as the only place for something important. In particular, title is not a replacement for alt on an image, and alt is not a tooltip.

Boolean Attributes

Some attributes do not need a value, because their presence is the whole message. They are called boolean attributes, after the logic term for something that is either true or false. The global attribute hidden behaves this way:

<p hidden>Closed on Sundays.</p>

The browser does not show this paragraph. To show it again, you remove the word hidden. The surprising part is that the value does not matter: hidden="false" still hides the paragraph, because the browser checks only whether the attribute is there. The validator reports "false" as a bad value. So to switch a boolean attribute off, delete it; to switch it on, write its name alone.

Strictly, hidden accepts one special value, until-found, which keeps the content hidden until the browser's find-in-page search reaches it. Any other value, including "false", hides the element in the ordinary way.

You will meet more boolean attributes later in the course, for example required on a form field and controls on a video.

The Bakery Page So Far

Here is the bakery page with a link, a photo and a French greeting:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maya's Bakery</title>
  </head>
  <body>
    <h1>Maya's Bakery</h1>
    <p>Fresh bread every morning, from 7 a.m.</p>
    <p lang="fr">Bienvenue chez Maya. Le pain sort du four à 7 heures.</p>

    <img src="bread.jpg" alt="Three round loaves of sourdough bread on a wooden board" width="600" height="400">

    <p><a href="menu.html">See our menu</a></p>

    <h2 id="opening-hours">Opening Hours</h2>
    <p>Monday to Saturday, 7 a.m. to 6 p.m.</p>
  </body>
</html>

Every attribute in this page sits inside a start tag, and every value is quoted. The id on the second heading does nothing visible yet. It lets a link jump straight to that heading with the address #opening-hours, where the # means "a place on this page".