Module 1: First Page · Lesson 2 of 6
HTML Tags and Elements: Opening and Closing Tags Explained
All lessons in Module 1
Goal: Write opening and closing tags and put together your first elements.
Learn
An HTML label is called a tag. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. The closing tag is the same word with a slash in front. Together they work like the two covers of a book. Whatever sits between them belongs together.
The opening tag, the content and the closing tag together form an element, as the syntax rules of the HTML standard (opens in a new tab) define it:
<p>Pizza is round.</p>
You only need two elements today. <h1> is the main heading of a page and <p> is a paragraph. (All six heading levels come later, in Headings.) Tag names are not case-sensitive, but everyone writes them in lowercase. If you forget a closing tag, the browser has to guess where the element ends. Its guess may not match what you meant.
The short version
- A tag is a label in angle brackets. Most come in pairs, like
<p>to open and</p>to close. - An element is the opening tag, its content and the closing tag together.
- A closing tag is the tag name with a forward slash in front. Leave the slash out and the browser sees a second opening tag.
- Tag names are not case-sensitive. Write them in lowercase anyway; everybody does.
Example
<h1>Pizza Facts</h1>
<p>A pizza is usually cut into eight slices.</p>
<p>Some people put pineapple on it. Bold choice.</p>Your task
The editor holds two lines of plain text with no tags. The browser runs them together into one line of words. Turn them into a real page:
- Wrap
Pizza Nightin<h1>and</h1>. - Wrap the sentence below it in
<p>and</p>. - Add one more paragraph about your favorite topping.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<h1>Pizza Night
<p>Tonight we make pizza.</p>Right
<h1>Pizza Night</h1>
<p>Tonight we make pizza.</p>Without </h1> the heading never ends, so the paragraph lands inside it and turns big and bold too.
Wrong
<p>Tonight we make pizza.<\p>Right
<p>Tonight we make pizza.</p>Closing tags use a forward slash. A backslash version is no tag at all, so the browser shows it as text.
Go deeper
When a browser reads your tags, it builds a tree of elements in memory called the DOM (Document Object Model (opens in a new tab)). CSS styles that tree and JavaScript changes it. Neither one touches your text file. To see the tree yourself, right-click a page and choose Inspect. The developer tools show the elements as the browser understood them, after it repaired any mistakes. That makes them a good place to hunt for a missing closing tag.
HTML has a little over 100 elements. About a dozen cover most of what you will ever write, so learn those properly first. The HTML tag reference is there for the rest.
Older code sometimes has <br />, with a slash at the end. That style comes from XHTML. On void elements the browser allows the slash and ignores it. On normal elements it does nothing at all, so <p /> still opens a paragraph that never closes.
Type the opening and closing tags first, then fill in the content between them. Do that every time and you won't forget a closing tag again. If a file is already a mess, a formatter such as Pretty HTML (opens in a new tab) re-indents it and the missing tag stands out.
Frequently asked questions
What is the difference between a tag and an element in HTML?
A tag is one label in angle brackets, such as <p> or </p>. An element is the complete unit: the opening tag, the content and the closing tag. In <p>Hi</p> there are two tags but one paragraph element. People often say "tag" for both. Documentation is stricter, so keep the two apart when you read it.
Are HTML tags case-sensitive?
No. <P>, <p> and even <h1>...</H1> all work. Everyone writes lowercase because it reads more easily and matches every tutorial and tool. Values are a different story. File names in attributes like src are often case-sensitive on web servers, so Cat.svg and cat.svg can be different files.
Do all HTML tags need a closing tag?
No. Void elements (opens in a new tab) such as <img>, <br> and <meta> have no content, so they have no closing tag at all. A few closing tags, like </p>, are technically optional. Write them anyway: the code is easier to follow and won't surprise you when you edit it months later.
Tags in this lesson
Read next
What is HTML, and what does a browser do with it?
HTML in plain English: what the letters stand for, how a browser turns tags into a page, what elements and attributes are, and a first page you can write in ten minutes.
20 HTML best practices for clean, valid code
Twenty rules we apply to every HTML file: doctype, lang, charset, semantic tags, alt text, labels, file names and W3C validation, each with a short code example.