Attributes, id and class

Introduction

You have already met attributes: href on links and src and alt on images. An attribute gives an element extra information. In this lesson you will learn the general rule, and two special attributes that you will use in every CSS and JavaScript lesson.

What is an attribute?

An attribute lives inside the opening tag. It has a name and a value.

<a href="https://example.com" title="Visit the example site">Example</a>

The pattern is always: name="value", with a space before each attribute.

• href is the attribute name, and https://example.com is its value.
• title shows a small tooltip when you hover.

The id attribute

id gives one element a unique name. No two elements on a page may share the same id.

Run it, scroll inside the result, and click the link. Links that start with # jump to the element with that id.

The class attribute

class puts elements into a group. Many elements can share the same class, and one element can have several, separated by spaces.

The class and id names do not change how the page looks by themselves. Later, CSS and JavaScript will use them to find elements.

id or class?

• An id is for exactly one element. Use it for one special thing.
• A class can be shared by any number of elements. Use it for a group of similar things.

When in doubt, choose class.

Try it yourself

The page below uses a class twice. Add a third paragraph with class="note", and give your h1 an id called title.

Summary

• Attributes add information, written as name="value" inside the opening tag.
• id is a unique name for one element.
• class is a shared name for a group of elements.
• You will use ids and classes constantly in CSS and JavaScript.