Elements and Attributes

Tags name the content; attributes configure it.

An element is a tag plus everything it wraps. An attribute lives inside the opening tag and configures that element — where a link points, which image to load, what a control is called.

<a href="/learn" title="Course index">Browse lessons</a>

Here href and title are attributes. Each one is a name, an equals sign, and a value in quotes. Order never matters, and an element can carry as many attributes as it needs.

Note

Some elements never wrap anything, so they have no closing tag. <img>, <br>, and <input> are all written as a single tag and rely entirely on attributes.

Attributes you will use constantly

id — a unique name
id labels one specific element on the page. No two elements should share an id, which is what makes it a reliable hook for links, labels, and scripts.
class — a shared label
class groups elements that should behave or look alike. Unlike id, the same class can appear on as many elements as you want, and one element can carry several classes.
alt, href, src — the required ones
Some attributes are not optional in practice: a link needs href, an image needs both src and a descriptive alt so screen readers can announce it.

Tip

Writing alt="" is a real choice, not a missing value — it tells assistive tech the image is decorative and should be skipped.

Question 1 of 2

You need to style six cards the same way. Which attribute fits?

idA unique name for one element
classA label shared by many elements
titleA tooltip shown on hover

Question 2 of 2

Which statements about attributes are true? Select all that apply.

They go in the opening tagNever in the closing tag
Their order does not matterAny sequence is valid
An element can only have one attributeOne per tag
Every element with attributes needs a closing tagVoid elements say otherwise

Try it yourself

Change the href, swap the class, and watch the result update.

Files

Press Escape, then Tab, to move on from the editor.

Preview

Press Run to preview your code.

Console

No output yet.

Challenge

Add a link with the class docs that points to https://developer.mozilla.org.