Elements, Tags, and Attributes

Prerequisites: How browsers read HTML

An element is a piece of the page. Most elements are written with a start tag, some content, and an end tag:

<p class="intro">Welcome to my site.</p>
└─────┬────────┘└────────┬─────────┘└┬─┘
  start tag           content      end tag

Tag names go inside angle brackets. The end tag has a slash: </p>.
Tag names are case-insensitive, but lowercase is the universal convention.

Nesting

Elements go inside other elements. Close them in the reverse order you opened them:

<p>This is <strong>very <em>important</em></strong>.</p>

em opens last, so it closes first.

Void elements

Some elements can't have content, so they have no end tag. These are called void elements: img, br, hr, input, meta, link, source, track, wbr, area, base, col, and embed.

<p>Line one<br>Line two</p>
<hr>
<img src="logo.png" alt="Company logo">

You may see <br /> with a slash — it's allowed and means the same thing, a habit carried over from XHTML. Pick one style and be consistent.

Attributes

Attributes give extra information about an element. They go in the start tag as name="value":

<a href="https://example.com" title="Visit example.com">Example</a>
<input type="checkbox" checked>
<p id="summary" class="lead highlight">A short summary.</p>

href is the link destination; title shows a tooltip.
checked is a boolean attribute: its presence means true. Writing checked="false" still means checked! Remove the attribute to make it false.
id names one unique element on the page; class puts an element in one or more groups (space-separated) — used by CSS and JavaScript.
Always quote attribute values. Quotes are sometimes optional, but values with spaces break without them.

Global attributes

A few attributes work on every element: id, class, style, title, lang, dir, hidden, tabindex, and data-* custom attributes. Level 2 covers them in depth.

Common mistakes

<!-- Wrong: duplicate id and unquoted value with a space -->
<p id="note">One</p>
<p id="note">Two</p>
<img src=my photo.jpg alt="Me">

error: Duplicate ID 'note'.
warning: The first occurrence of ID 'note' was here.
error: Attribute 'photo.jpg' not allowed on element 'img' at this point.

The browser read src=my and then an attribute named photo.jpg — quoting the value fixes it.

Practice

Write a paragraph containing a link to https://www.w3.org that opens a tooltip reading "The Web Consortium", with the word "W3C" in bold inside the link.

Show solution

<p>Visit the <a href="https://www.w3.org" title="The Web Consortium"><strong>W3C</strong> website</a>.</p>