🎓 A1Learner
🔍

HTML Attributes

An attribute is extra information written inside the opening tag of an element. Each attribute has a name and a value.

One attribute

The title attribute adds a tooltip text. The tooltip is not part of the page text.

<p title="A friendly greeting">Hello.</p>

An id attribute

The id value names this one paragraph. The paragraph text still appears as normal.

<p id="intro">Welcome home.</p>

A class attribute

The class value labels this paragraph as a note. Several elements can share one class name.

<p class="note">Please read this note.</p>

A style attribute

The style attribute can set a text colour. The colour claim lives in this text, not in the output.

<p style="color: blue;">Blue words.</p>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
</head>
<body>
<h1 id="top" title="Main heading">Home Page</h1>
<p class="note">Welcome to our home page.</p>
<p id="closing">Thanks for visiting.</p>
</body>
</html>

Key points

  • Use an equals sign to join an attribute name and its value
  • Value: the setting written inside double quotes
  • id attribute: a name that identifies one element
  • class attribute: a name that can label a group of elements
  • title attribute: extra text a browser can show as a tooltip
  • An attribute adds information to an element without changing its content.

In this example, the html element carries a lang attribute. The heading carries an id and a title attribute. The first paragraph carries a class attribute. The last paragraph carries its own id attribute. The browser displays all three text lines in order.

Note

Attributes belong in the opening tag, never in the closing tag.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Where does an attribute belong?