Elements

Beginners often get confused between HTML elements, nested elements, and tags. Let's clarify the difference by understanding each one step-by-step.

What is an HTML Element?

An HTML element is a complete set that consists of a start tag (or opening tag), content, and an end tag (or closing tag).

HTML Element = Start Tag + Content + End Tag

For example:

<h1>This is our first heading</h1>

In this example, <h1> is the start tag, "This is our first heading" is the content, and </h1> is the end tag. Together, they form an HTML element.

What is a Nested HTML Element?

A nested HTML element is an HTML structure where one element is placed inside another element.

The enclosing element is often referred to as the parent, while the enclosed element is called the child.

Nested HTML Element = One HTML Element Inside Another HTML Element

For example:

<h1><b>This is our first heading</b></h1>

In this example, the <b> element (child) is nested inside the <h1> element (parent).

What is an Empty HTML Element?

An empty HTML element is one that does not have a closing tag or content. These elements are also known as void elements.

Empty HTML Element = Tags with No Content

For example:

<br />

This is a break tag, which has no content and no closing tag. It is used to insert a line break within text or other inline elements.

The <hr /> tag, used to create a horizontal rule, is another example of a void element.

HTML Tags vs. Elements

HTML Tags

HTML tags are the markers that define the start and end of an element. They are wrapped in angle brackets, like <p> and </p>.

HTML Elements

An HTML element includes an opening tag, content, and a closing tag, forming a complete set.

For example:

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

Key Takeaways

Tags set boundaries; elements include tags plus content.
Tags come in pairs most of the time, whereas elements may include nested elements.
Void elements like <br /> are still considered elements, even though they don't have a closing tag or content.
Elements can be parent or child when nested, but tags themselves cannot be parent or child.