HTML Elements
All HTML TopicsAn HTML element is a complete piece of content on a webpage. It is usually made up of an opening tag, some content, and a closing tag.
Think of an HTML element like a container. The opening tag tells the browser where the container starts, the content goes inside it, and the closing tag tells the browser where it ends.
For example:
<p>Hello World!</p>
The complete
<p>Hello World!</p>
is an HTML element.
Anatomy of an HTML Element
Let's break one element into its individual parts.
<p>Hello World!</p>
│ │ │
│ │ └── Closing tag
│ └─────────────── Content
└──────────────────── Opening tag<p>
tells the browser that a paragraph
element is starting.
</p>
tells the browser that the paragraph
element has ended.
Common HTML Elements
HTML provides many elements for different types of content.
<h1>Heading</h1>Creates a main heading.
<p>Paragraph</p>Creates a paragraph.
<a href="#">Link</a>Creates a clickable hyperlink.
<button>Click</button>Creates a button.
<strong>Important</strong>Gives strong importance to text.
<div>Content</div>Creates a generic container.
HTML Tag vs HTML Element
These two terms are related, but they are not exactly the same.
| Term | Example | Meaning |
|---|---|---|
| Opening Tag | <p> | Starts the paragraph. |
| Closing Tag | </p> | Ends the paragraph. |
| Element |
<p>Hello</p>
| The complete structure. |
HTML Elements Can Be Nested
One HTML element can be placed inside another HTML element.
<div>
<h1>My Website</h1>
<p>
Welcome to my website.
</p>
</div>
Here, the
<h1>
and
<p>
elements are inside the
<div>
element.
This is called
nesting.
What Are Empty Elements?
Some HTML elements do not contain content and therefore do not need a closing tag.
<br>
Inserts a line break.
<img src="image.jpg" alt="Image">
Embeds an image into the page.
<hr>
Represents a thematic break.
Try HTML Elements Yourself
Change the HTML below and click Run to see the result.