Lessons · HTML and CSS · tags and elements
Tags, elements, content
An element is an opening tag, content, and a closing tag with a slash. Elements nest inside each other, and a few have no content and no closing tag at all.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
Every line of HTML is made of this. Reading it as boxes inside boxes is what makes a page's structure obvious instead of a wall of angle brackets.
How to think about it
Say it out loud: p opens, the text, p closes. When one element sits inside another, the inner one closes first.
Worked example
<p>Hello</p>Opening tag, content, closing tag: one element.
<p>Hello <strong>there</strong></p>Elements nest: strong sits inside p and closes before p does.
<br>A few elements have no content and no closing tag: br, img, input, hr. They are called void elements.
Your turn
Close the paragraph.
<p>Done<>
Write a page and watch it render
The trap
Closing the outer element before the inner one, as in <p><em>text</p></em>. Browsers repair it silently and differently, so the layout shifts between them.