HTML Elements for Beginners — How Do Tags Work?
In the previous lesson we learned the HTML page structure. Now we will go deeper: what exactly is an element? What is the difference between an element and a tag? And what are empty elements? This lesson will help you understand HTML the way professional developers do.
Element vs Tag — What Is the Difference?
Many beginners mix up the words "tag" and "element." Here is the simple difference:
- Tag: the text written inside
< >— like<p>or<h1>. - Element: the opening tag + the content + the closing tag together.
<!-- This is an opening tag -->
<p>
<!-- This is a complete element: opening tag + content + closing tag -->
<p>This is text inside the element.</p>
Simple analogy: the tag is the parentheses, and the element is everything inside and between them. Just like a sentence: the parentheses are "( )" and the element is "(the full text inside them)".
An HTML Element Anatomy — Three Parts
Every HTML element has three parts:
<h1>Welcome to the world of HTML!</h1>
| Part | In the example | What it does |
|---|---|---|
| Opening tag | <h1> |
Tells the browser: "Start here and apply this element type" |
| Content | Welcome to the world of HTML! | The text, image, or anything that appears on the page |
| Closing tag | </h1> |
Tells the browser: "This element ends here" |
Nested Elements — Elements Inside Elements
HTML elements can be placed inside one another. This is called nesting. In fact, all web pages are just nested elements.
<body>
<h1>Page Title</h1>
<p>This text contains a <strong>very important</strong> word inside.</p>
</body>
In this example:
<body>contains<h1>and<p><p>contains<strong>inside it
<!-- ✅ Correct — the inner element closes first -->
<p>A <strong>important</strong> word in the sentence.</p>
<!-- ❌ Wrong — crossing is not allowed -->
<p>An <strong>important</p></strong>
Empty Elements — No Content and No Closing Tag
In HTML there are elements that do not need content and do not need a closing tag. These are called empty elements or self-closing elements.
Common examples:
| Tag | What it does |
|---|---|
<br> |
New line (Line Break) — like pressing Enter |
<hr> |
Horizontal line (Horizontal Rule) |
<img> |
Displays an image — no closing tag needed |
<input> |
Input field in forms |
<meta> |
Hidden page information inside head |
<link> |
Link external files like CSS |
<!-- Example of empty elements -->
<p>First line<br>Second line after a line break</p>
<hr>
<img src="logo.png" alt="Site logo">
Note:<br>has no text and no</br>— it is just a quick instruction for the browser.
Tag Case — Uppercase or Lowercase?
HTML does not differentiate between uppercase and lowercase letters in tags. The browser understands <P> and <p> the same way.
<!-- All of these work the same way -->
<P>Paragraph</P>
<p>Paragraph</p>
<P>Paragraph</p>
But the accepted standard among developers worldwide is to always write tags in lowercase. This is what the W3C (the organization responsible for web standards) recommends. Stick to it from the start to write professional code.
Quick Comparison — Normal Element vs Empty Element
| Type | Example | Closing tag | Has content? |
|---|---|---|---|
| Normal element | <p>Text</p> |
✅ Yes | ✅ Yes |
| Normal element | <h1>Title</h1> |
✅ Yes | ✅ Yes |
| Empty element | <br> |
❌ No | ❌ No |
| Empty element | <img src="..."> |
❌ No | ❌ No |
Frequently Asked Questions — FAQ
How many HTML tags are there?
HTML5 includes more than 100 official tags. But do not worry — 90% of real websites rely on fewer than 20 essential tags. You will learn them gradually throughout this course.
Do I need to memorize all tags?
No. Even professional developers constantly refer to the reference. What matters is understanding how tags work, not memorizing them by heart. Consistent practice is what makes them stick in your memory.
What happens if I use tags that do not exist in HTML?
The browser will not show an error, but it will completely ignore the unknown tag. For example, <mytag>Text</mytag> — it will display only the text without any styling. That is why you should always use official, standard tags.
Are <br> and <br/> the same?
In modern HTML5: yes, both work the same way. Writing <br> without a slash is the preferred HTML5 style. <br/> was the standard in older XML/XHTML.