Lesson Outcomes

After completing this lesson, learners will be able to:

• Define an HTML element.
• Identify the parts of an HTML element.
• Explain the structure of opening and closing tags.
• Understand nested HTML elements.
• Apply correct element structure in HTML code.

Overview

HTML elements are the building blocks of web pages. Every piece of content on a webpage is created using elements.

An HTML element defines how content is structured and displayed in a browser.

Understanding how elements are structured is essential for:

• Writing correct HTML code
• Avoiding errors
• Creating well-organised web pages

1. What is an HTML Element?

An HTML element is a complete unit that defines content on a webpage.

It consists of:

• An opening tag
• Content
• A closing tag

Example:

<p>This is a paragraph</p>

This entire line is an HTML element.

2. Parts of an HTML Element

An HTML element has three main parts:

2.1 Opening Tag

• Marks the beginning of an element
• Written inside angle brackets

Example:

<p>

2.2 Content

• The information inside the element
• Can be text, images, or other elements

Example:

This is a paragraph

2.3 Closing Tag

• Marks the end of an element
• Includes a forward slash

Example:

</p>

3. Complete Element Structure

A full HTML element looks like this:

<tag>Content</tag>

Example:

<h1>Welcome</h1>

Key Points

• Opening and closing tags must match
• Content is placed between the tags
• Proper structure prevents errors

4. Nested HTML Elements

HTML elements can be placed inside other elements. This is called nesting.

Example:

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

In this example:

• <p> is nested inside <div>

Rules for Nesting

• Elements must be properly opened and closed
• Inner elements must close before outer elements

Correct example:

<p><strong>Text</strong></p>

Incorrect example:

<p><strong>Text</p></strong>

5. Empty (Self-Closing) Elements

Some HTML elements do not have content or closing tags.

These are called empty elements.

Examples include:

• <img>
• <br>
• <hr>

Example:

<img src="image.jpg" alt="Image">

These elements only use an opening tag with attributes.

6. Importance of Proper Element Structure

Correct element structure is important because it:

• Ensures the browser displays content correctly
• Prevents errors in code
• Improves readability
• Makes code easier to maintain

Poor structure can lead to broken layouts or unexpected behaviour.

Key Notes

• An HTML element includes an opening tag, content, and a closing tag.
• Tags define the start and end of elements.
• Elements can be nested inside other elements.
• Nested elements must be properly structured.
• Some elements are empty and do not require closing tags.
• Proper structure is essential for correct display and functionality.