HTML Elements
Today we look at HTML elements, the complete pieces of a page: an opening tag, the content inside, and a closing tag, nested the way the browser expects to read them.
- 1
Tag vs element
In the last lesson we said HTML is a system of signs. Those signs are tags. Today we take the next step. An element is the full piece, not the sign alone: the opening tag, the content in the middle, and the closing tag.
<p>Hello</p>is an element.<p>by itself is only a tag.This difference matters because the browser does not draw a page from lonely tags. It draws complete pieces, and those pieces can sit inside one another, like boxes inside boxes. Once you see a page as a set of elements, the rest of HTML becomes much easier to read.
- 2
The Nesting Problem: Defining Starts, Ends, and Hierarchies
As soon as you can put signs around words, a new problem appears. A real page is not one heading. It has a title, a paragraph, a few important words inside that paragraph, and often a whole article wrapping all of it. If everything is just a pile of signs with no clear start and end, the browser cannot tell where one piece stops and the next begins.
So HTML agreed that every ordinary piece of the page is an element, a complete unit. You open it, you put something inside, and you close it. You may place a smaller element inside a larger one, which is called nesting. You close the inner one first, then the outer one, the way you close an inner lid before you close the outer box.
- 3
How Browsers Read Elements and Handle Void Tags
The browser reads from an opening tag until it finds the matching closing tag, and it treats everything in between as that element's content. If a paragraph contains a
<strong>element, the browser still sees one paragraph, but one phrase inside it is marked as important.Some elements have no content inside and no closing tag. They are empty, or void, elements. In the example below, the line under the heading is an
<hr>. That one tag is the whole piece.The browser also cares about meaning.
<article>and<header>are not just boxes. They tell the browser what that region of the page is for. A<div>is an unlabelled box. A<header>is a labelled one. - 4
Hands-On: Inspecting a Nested Notice Card
The example below is a tiny article made of nested elements. Read the code once, then look at the browser pane beside it. You are looking at the same file, drawn as a page.
- 5
The Golden Rule of Nesting: Open First, Close Last
Opening tag, content, closing tag. That is the shape of almost every HTML element you will write. In the example,
<article>is the outer piece. Inside it,<header>holds the heading, and<p>holds the sentence. Inside that sentence,<strong>and<em>are smaller elements sitting in the line of text.Notice the order of the closing tags. The inner pieces close first, then the outer ones. If you write
<p><strong>Hello</p></strong>, the browser has to guess, and the page often breaks. If you write<p><strong>Hello</strong></p>, the shape is clean, and the browser knows exactly what belongs where.
A single opening or closing marker telling the browser where a section starts or ends. It carries no content on its own.
Opening tag + text/child content + closing tag. This entire tree node is what the browser parses and renders.
What you'll learn
- 1What an element is, and how it differs from a tag
- 2Why pages are built from nested pieces, not a pile of signs
- 3How the browser reads from an opening tag to its closing tag
- 4Block elements, inline elements, and empty tags
- 5Semantic tags such as article and header
Line by line
<article>This is the outer element, a complete piece of content that can stand on its own, such as a notice, a blog post, or a card. The browser treats everything until
</article>as part of this piece.<header>This is a labelled top region inside the article. It usually holds the heading, and it tells the browser that this part introduces what follows.
<h2>Office Notice</h2>This is a heading element: opening tag, the words in the middle, and a closing tag. h1 is the main title of the whole page; h2 is a section title inside it.
<hr>This is an empty element: a horizontal rule. It is the piece itself, so it has no closing tag and no content inside.
<p> ... </p>This is a paragraph element. It is a block, so it starts on a new line and takes the width of its parent. The sentence inside it is the content of this element.
<strong> and <em>These are inline elements sitting inside the paragraph.
<strong>marks important text.<em>marks emphasis. They stay in the same sentence and only take as much width as the words need. That is the difference you can see: the paragraph is a block, and these two sit inside it.
Try it yourself
Now try it yourself. Build a small About Me card with <article>, a <header> that contains an <h2>, and two <p> tags. Wrap your name in <strong> inside the first paragraph. Close every inner tag before you close the outer one.
Hint: Last opened, first closed. If you open article, then header, then h2, you close h2, then header, then article.
Common mistakes
- 1.Overlapping tags, such as
<p><strong>Hello</p></strong>. The inner element must close before the outer one, or the browser has to guess where each piece ends. - 2.Using only
<div>for every region of the page. A div is an unlabelled box. Prefer<header>,<nav>,<main>, and<article>so the browser, and search engines, can tell what each region means.
Interview prep (Click to reveal)
Q: What is the difference between a tag and an element?↓
A tag is the syntax label itself, such as <p> or </p>. An element is the complete entity: opening tag + enclosed content/children + closing tag, e.g. <p>Hello</p>.
Q: What is the difference between block and inline elements?↓
Block elements (like <p>, <div>, <h1>) start on a new line and stretch across the full available parent width. Inline elements (like <span>, <strong>, <a>) sit inline with text and only take the width of their content.
Q: What are semantic tags? Give two examples.↓
Semantic tags describe their actual structural role or meaning to browsers and assistive tools. For example, <nav> defines navigation links, and <article> defines independent self-contained content, unlike a generic <div>.