HTML Elements
You already know the basic document skeleton. This session zooms into the building blocks inside that page: HTML elements. Every heading, paragraph, and most other pieces of a page are elements.
What is an HTML element?
An HTML element is a complete unit of markup. For most elements that wrap content, it has three parts:
- A start (opening) tag — for example
<p> - The content — the text or nested elements inside
- An end (closing) tag — for example
</p>
Together,<p>Hello</p>is one paragraph element.
Direct answer
An HTML element usually means a start tag, optional content, and an end tag that match. The browser uses that pair to know where the element begins and ends. Some empty elements do not wrap content and therefore do not use a separate end tag.
Element with start tag, content, end tag
html<p>This is a paragraph element.</p>
<h1>This is a heading element.</h1>Reading the example
<p>opens a paragraph element- The text between the tags is the content
</p>closes the paragraph- The heading works the same way with
<h1>and</h1>
Nested elements
Elements can sit inside other elements. That is called nesting. The inner element must be fully opened and closed before the outer element closes.
Nested elements
html<p>This paragraph contains a <strong>important</strong> word.</p>Here the strong element is nested inside the p element. Nesting lets you mark meaning inside larger chunks of content. Keep the tree clean: do not overlap tags like opening p, opening strong, then closing p before strong.
Empty (void) elements
Some elements do not wrap content. They are often called empty or void elements. A common beginner example is the line break:
Empty br element
html<p>Line one.<br>Line two.</p>The <br> tag creates a line break. It has no separate closing tag and no inner text. Later you will meet other empty elements such as images. For now, remember: not every element looks like a start-content-end sandwich.
Tags vs elements
People sometimes say “tag” and “element” as if they were identical. A tag is the markup in angle brackets. An element is the whole unit the browser understands — often start tag + content + end tag. Saying “the p element” usually means the complete paragraph unit.
Try it yourself
- Open your basic HTML file
- Add a paragraph with nested
strongtext - Add a second paragraph that uses
<br>between two short lines - Save and refresh the browser
- Confirm bold text and the line break appear as expected
Common mistakes
- Forgetting the closing tag for elements that need one
- Overlapping tags instead of nesting them cleanly
- Treating every tag as if it must have content and an end tag (empty elements differ)
- Using the wrong closing name, such as
</p>paired with<h1> - Putting visible page content outside
body
Summary
- Most HTML elements use a start tag, content, and an end tag
- Nested elements must close in the correct order
- Empty elements like
brdo not wrap content - A tag is the bracketed marker; an element is the full unit
- Practice nesting and a simple line break in your page
- Attributes, which add extra information to tags, come in the next session
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top