An element is one complete piece of an HTML page. It usually has three parts: an opening tag, some content and a closing tag.
index.html
HTML
<p>Fresh books arrive every Friday.</p><p>is the opening tag. It says “a paragraph starts here”.Fresh books arrive every Friday.is the content.</p>is the closing tag. It is the same as the opening tag with a slash.
Together, all three parts are the paragraph element. People often say “tag” when they mean “element”, and you will hear both. The tag is just the label. The element is the whole thing.
Tag names
Tag names are written in lowercase by convention: p, h1, a, img, ul. HTML itself is not case sensitive here, but lowercase is the standard and keeps code consistent.
Elements you will meet constantly
| Element | Meaning |
|---|---|
h1 to h6 | Headings |
p | Paragraph |
a | Link |
img | Image |
ul, ol, li | Lists and list items |
div, span | Generic containers |
Elements can be long
The content of an element can be many lines, and can include other elements.
index.html
HTML
<p>
Visit us on <strong>Maple Street</strong>,
next to the post office.
</p>
warning
Forgetting the closing tag
If you forget
</p>, browsers try to guess where the paragraph ends. Sometimes the guess is fine. Sometimes the rest of your page ends up inside the wrong element. Always write both tags unless the element is one of the special ones in Empty Elements.Exercise: spot the three parts
Look at <h2>Today's picks</h2>. Name the opening tag, the content and the closing tag.
Show a possible solution
The opening tag is <h2>, the content is Today's picks and the closing tag is </h2>.