Elements, attributes and nesting

In this lesson: Write correctly nested elements and use attributes properly.

An element is normally an opening tag, some content, and a closing tag:

<p>This is a paragraph.</p>
 ↑        ↑                ↑
opening  content        closing

A few elements have no content and therefore no closing tag. These are called void elements:

<br>      <!-- a line break -->
<hr>      <!-- a horizontal rule -->
<img src="photo.jpg" alt="A photo">
<input type="text" name="email">

Attributes go in the opening tag and configure the element. They are always name="value":

<a href="/contact" title="Get in touch">Contact us</a>
<img src="logo.png" alt="Yanjye logo" width="120">

Some attributes work on almost any element:

id — a unique name for one element on the page. Only one element may have a given id.
class — a label you can reuse on many elements. This is what CSS usually targets.
style — inline CSS. Useful for a quick test, but keep real styling in a stylesheet.

Elements go inside other elements, and they must close in the reverse order they opened — like closing brackets in maths.

<!-- Correct -->
<p>Yanjye is <strong>free</strong> to join.</p>

<!-- Wrong: the tags cross over -->
<p>Yanjye is <strong>free</p></strong>

Indent as you nest. Two spaces per level. Badly indented HTML is where nesting bugs hide, and every editor will do it for you.

Two broad behaviours are worth knowing from the start:

Block elements (<div>, <p>, <h1>, <section>) start on a new line and take the full width available.
Inline elements (<span>, <a>, <strong>, <em>) sit inside a line of text and are only as wide as their content.

You can change this with CSS later, but the default explains most surprises beginners hit.

All lessons in this track

Code playground