Links and attributes

Attributes

Add information to an element with attributes and understand quoted values, boolean attributes, classes, and unique IDs.

Attributes add extra information to an element. You write them in the opening tag, usually as a name and a value.

<p class="introduction">Welcome to the guide.</p>

Here, class is the attribute name and introduction is its value.

An element can carry several attributes at once:

<p id="welcome" class="introduction featured">
  Welcome to the guide.
</p>

Always quote attribute values. Double quotes are the common convention in HTML.

The class attribute holds one or more space-separated names. You can reuse the same class on many elements. CSS and JavaScript often use classes to style or select groups of elements.

An id identifies one specific element in the document. Every ID must be unique on the page. Duplicate IDs break fragment links, label associations, and many JavaScript selectors.

Some attributes are boolean. Their presence alone means true:

<button disabled>Save</button>

You do not need disabled="disabled" in HTML5, although both forms work.

Throughout this course you will meet element-specific attributes: href on links, src and alt on images, type on form controls, and more. Attributes describe or configure an element. They do not replace its content.

A link still needs useful link text between the tags. An image still needs a useful text alternative when it conveys information. Getting the attributes right is necessary, but it is not the whole job.

When you review your HTML, scan opening tags for unquoted values or duplicate attribute names. Those mistakes are rare in hand-written pages but common when copying snippets from older tutorials.

Lesson completed