Elements & Attributes

HTML pages are built from elements - and most elements can carry attributes that give the browser extra information about how to render or behave.

Elements & Tags

Most elements have an opening tag, content, and a closing tag - like <p>text</p>. Elements can nest inside each other to build more complex structures.

Some elements are "empty" and never wrap content, like <br>, <img>, <hr>, and <input>. They don’t need a closing tag.

Try it yourself

<p>This is a <strong>nested</strong> element inside a paragraph.</p>
<hr />
<br />
<p>New line above, thanks to &lt;br&gt;.</p>

Output

Attributes

Attributes are name="value" pairs written inside the opening tag - never the closing one. Common ones include id, class, style, title, and lang.

Try it yourself

<a href="https://example.com" title="Visit Example">Example link</a>
<p id="intro" class="highlight" lang="en">Attributes describe an element.</p>

Output

Case Sensitivity & Best Practice

HTML5 isn’t strictly case-sensitive, but lowercase tags and attributes are the universal convention. Always quote attribute values, even when it isn’t strictly required.

Coding challenge

Create a paragraph containing a nested link. Give the paragraph an id, and the link a title attribute.

<p>
  <!-- add a nested <a> link here -->
</p>

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. Where do you place an attribute?

2. Which of these is an empty (self-closing) element?

3. What does the class attribute do?

4. Which is the correct way to write an attribute value?