Elements, tags and nesting

Tags and elements are not the same thing

People often use the words interchangeably, but they mean different things, and knowing the difference makes documentation much easier to read.

• A tag is the label in angle brackets: <p> is an opening tag and </p> is a closing tag.
• An element is the complete unit: the opening tag, whatever is inside it, and the closing tag.

<p>Water boils at 100 °C at sea level.</p>

Here <p> and </p> are tags. The whole line is a paragraph element, and the sentence is its content.

Elements inside elements

Elements can contain other elements. This is called nesting, and it is how a page gets its structure. In the example below, the strong element is inside the paragraph, and the paragraph is inside the body.

<p>Remember to <strong>save your file</strong> before you refresh.</p>
<p>Shortcuts: <em>Ctrl+S</em> on Windows, <em>Cmd+S</em> on a Mac.</p>

The element that contains another is its parent; the one inside is its child. Elements that share a parent are siblings. You will meet these words constantly in CSS and JavaScript, so it is worth learning them now.

The golden rule: last opened, first closed

Nesting must be tidy, like boxes inside boxes. If you open a paragraph and then open strong inside it, you must close strong before you close the paragraph.

<!-- Correct -->
<p>Press <strong>Start</strong> to begin.</p>

<!-- Wrong: the boxes overlap -->
<p>Press <strong>Start</p> to begin.</strong>

The browser will try to repair the second version, but it has to guess where you meant each element to end. Different guesses lead to different results, especially once you add styling.

A simple check: draw an imaginary line from each opening tag to its closing tag. The lines should never cross.

Void elements: no content, no closing tag

Some elements cannot contain anything. A line break is just a break; an image is just an image. These are called void elements, and they are written with only an opening tag.

You may see them written as <br /> with a slash. That style comes from an older standard called XHTML. In HTML both forms work, and many code formatters add the slash, so do not be surprised by either. What you must never write is a closing tag such as </br> or </img>.

Lowercase, please

<P>, <p> and <P> all work, because HTML tag names are not case-sensitive. Everyone writes them in lowercase, though, and mixing cases makes code harder to read. Stick with lowercase.

Common mistakes

• Overlapping tags, as in the wrong example above. Read your code from the inside out to catch them.
• Forgetting a closing tag, so the rest of the page accidentally ends up inside an element. If a whole section of your page suddenly turns bold, look for an unclosed strong.
• Closing void elements with </img> or </br>.
• Using <br> to make space. Several <br> tags in a row to push content down is a layout job; CSS does it better. Use <br> only where a line break is part of the content, such as an address or a poem.

Exercise

The snippet below has three mistakes. Find and fix them, then check your version in the editor.

<p>Our office is open <strong>Monday to Friday</p></strong>
<p>Address:<br>12 Station Road</br>Pune</p>
<p>Call us on <em>020 1234 5678</p>

<p>Our office is open <strong>Monday to Friday</strong></p>
<p>Address:<br>12 Station Road<br>Pune</p>
<p>Call us on <em>020 1234 5678</em></p>