Elements vs Tags

People often use “tag” and “element” to mean the same thing. They are related but not identical.

Tags

A tag is the syntax you type — the angle brackets and the name inside them.

<p>     ← opening tag
</p>    ← closing tag

Tags come in two forms:

• Opening tag — marks where the element starts: <p>
• Closing tag — marks where it ends, with a forward slash: </p>

Elements

An element is the complete unit: opening tag + content + closing tag.

<p>This is a paragraph.</p>

Part	What it is
<p>	Opening tag
This is a paragraph.	Content
</p>	Closing tag
All three together	The element

Void elements

Some elements have no content and therefore no closing tag. These are called void elements.

<img src="photo.jpg" alt="A mountain landscape">
<br>
<hr>

There is nothing to wrap, so there is nothing to close.

Note

You may see void elements written with a trailing slash (<img />). That syntax came from XHTML. In HTML5 it is optional — both forms are valid. This course uses the form without the slash.

Common misconceptions

Misconception	Reality
<p> is a paragraph	<p> is an opening tag. <p>Some text</p> is a paragraph element.
Tags and elements are the same thing	Tags are syntax; elements are structural units.
Every element needs a closing tag	Void elements like <img> and <br> do not.

Exercise

Open index.html from the previous lesson in VS Code.

Find these three lines in the file and answer the questions for each:

1. <title>My First Page</title>
2. <h1>Hello, world!</h1> (or whatever you changed it to)
3. <meta charset="utf-8">

For each one, write down:

• Is it a normal element or a void element?
• What is the opening tag?
• What is the content (if any)?
• What is the closing tag (if any)?

One of the three is a void element — which one, and how can you tell?

Recap

• A tag is the syntax inside < >.
• An element is the full unit: opening tag + content + closing tag.
• Void elements (<img>, <br>, <hr>) have no content and no closing tag.