Common Attributes

Identifiers as anchors (§7.5.2)

The id attribute assigns a unique name to an element. Similar to the name attribute of the <a> element, but it allows any element in the document body to be the destination of a link.

Example:

The footnotes section of the Results page is in a division with the identifier footnotes:

<div class="section bodytext" id="footnotes">

This code is a hyperlink to that section:

<a href="results.xhtml#footnotes">Footnotes</a> are listed beneath the results table.

This link should take you to that section:

Footnotes are listed beneath the results table.

Identifiers as style sheet selectors

Style sheet rules can be assigned to specific id values (unlike the obsolete name attribute).

Example:

If your Web browser supports style sheets, the following should produce a centered and italicized paragraph.

This page includes a style rule for the poem identifier:

#poem { font-style: italic; text-align: center; }

Let’s use that identifier for a poem by Nancy Stark:

<p id="poem">Higgledy&#8208;piggledy<br>
Nic&rsquo;laus Copernicus<br>
Looked at the Universe<br>
Spoke to the throng<br>
Give up your Ptolemy<br>
Rise up and follow me,<br>
Heliocentrically<br>
Ptolemy&rsquo;s wrong</p>

Your Web browser renders it like this:

Higgledy‐piggledy
Nic’laus Copernicus
Looked at the Universe
Spoke to the throng
Give up your Ptolemy
Rise up and follow me,
Heliocentrically
Ptolemy’s wrong

Classes (§7.5.2)

The class attribute assigns class names to an element. Classes are used as style sheet selectors.

Example:

If your Web browser supports style sheets, the following should produce a paragraph with an underlined, blue phrase.

This page includes a style rule for elements belonging to both the fake and link classes:

.fake.link { text-decoration: underline; color: blue; }

This code has a <span> with two classes, fake and link:

Hyperlinks traditionally appear <span class="fake link">underlined and blue</span> to distinguish them from body text.

Your Web browser renders it like this:

Hyperlinks traditionally appear underlined and blue to distinguish them from body text.

Your Browser

Your Web browser identified itself as Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com) when it requested this page. Mozilla 5.0, why do you lie to me so?