Now that you’ve created your first HTML page and done with HTML setup, now we will learn about what HTML elements and tags are and how to use them properly.

🏗️ What Are HTML Elements?

An HTML element is a complete piece of content that consists of three parts:

• An opening tag (like <h1>)
• Attributes (optional, like id="header")
• Content (the text or other elements inside)
• A closing tag (like </h1>)

HTML Element Syntax

Here’s the Syntax of an HTML element:

<h1 id="header">This is a heading</h1>
│   |            │                └── Closing tag
|   |            └── Content
│   └── Attribute (optional)
└── Opening tag

Types of HTML Elements

HTML elements can be categorized into two main types:

• Block level elements: These elements take up the full width available and start on a new line. Examples include <div>, <p>, <h1>, <ul>, etc.
• Inline elements: These elements only take up as much width as necessary and do not start on a new line. Examples include <span>, <a>, <strong>, <em>, etc.

HTML Element Examples

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<span>This is inline text.</span>
<a href="https://example.com">This is a link</a>

The output of the above code will look like this:

As you can see, the <h1> and <p> are block-level elements that take up the full width and start on a new line, while <span> and <a> are inline elements that only take up as much width as necessary and do not start on a new line.

🏷️ HTML Tags

Tags are the keywords wrapped in angle brackets (< >) that tell the browser what type of content to display and how it should look like to users.

Types of HTML Tags

There are two types of HTML tags:

• Container Tags
• Self-Closing Tags

Container Tags (Most Common)

Container tags are used to wrap content. Container tags have both opening and closing tags:

<p>This is a paragraph</p>
<h1>This is a heading</h1>
<strong>This is bold text</strong>

In this example <p> is the opening tag, </p> is the closing tag, and “This is a paragraph” is the content, so <p> is the container tag.

Self-Closing Tags

Self-closing tags are generally used to insert elements that don’t have any content inside them. But they have special meaning in HTML. Some of the examples of self-closing tags are:

<br>   <!-- Line break -->
<hr>   <!-- Horizontal rule -->
<img>  <!-- Image -->

in this example <br>, <hr>, and <img> are self-closing tags. <br> inserts a line break, <hr> creates a horizontal rule, and <img> embeds an image into the page. They do not have any content inside them, so they don’t need a closing tag.

🏷️ HTML Elements vs HTML Tags

HTML elements and HTML tags are closely related but you don’t have to worry about the difference between them. They are often used interchangeably.

📝 How to Use HTML Elements

Basic Structure

Every HTML element follows the same pattern:

<tagname>content goes here</tagname>

Examples of Common Elements

<h1>Main Title</h1>
<p>This is a paragraph of text.</p>
<strong>Important text</strong>
<em>Emphasized text</em>

Nested HTML Elements

You can use elements inside other elements and its called nesting.

Nested Elements example:

For Example, you can put a <strong> element inside a <p> element:

<p>This paragraph contains <strong>bold text</strong> and <em>italic text</em>.</p>
```html
<p>This paragraph contains <strong>bold text</strong> and <em>italic text</em>.</p>

Correct vs Incorrect Nesting

✅ Correct nesting:

<p>Text with <strong>bold and <em>italic</em></strong> formatting.</p>
<p>Text with <strong>bold</strong> and <em>italic</em> formatting.</p>

❌ Incorrect nesting:

<p>Text with <strong>bold and <em>italic</strong></em> formatting.</p>
<p>Text with <strong>bold and <em>italic</em> formatting.</p></strong>

In this example, the first paragraph is not correctly nested because the closing tags are not in the correct order. The <strong> tag should close after the <em> tag. Similarly, the second paragraph has the closing </strong> tag after the <em> tag, which is incorrect.

🔧 HTML Attributes

HTML attributes provide additional information about an element. They are always specified in the opening tag and come in name/value pairs like name="value".

Element Attributes syntax

<tagname name="value" id="uniqueID">content</tagname>

An HTML element can have multiple attributes to provide more details about it.

Common Attributes Example

<h1 class="main-title" id="header">Page Title</h1>
<p style="color: blue;">Blue text paragraph</p>
<img src="photo.jpg" alt="Description">

🎯 Practical Example

Let’s see how elements work together in a simple webpage:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>

    <p>This is my <strong>first webpage</strong> using HTML elements!</p>

    <p>I'm learning about <em>elements</em> and <em>tags</em>.</p>

    <p>Each element has:
        <br>- An opening tag
        <br>- Content
        <br>- A closing tag
    </p>
</body>
</html>

🎮 Try It Yourself!

Practice using HTML elements by creating a simple page:

1. Create an HTML file name index.html,
2. Add a heading with <h1>
3. Write a paragraph with <p>
4. Make some text bold with <strong>
5. Make some text italic with <em>
6. Try nesting elements inside each other

� Key Takeaways

Now you understand:

• ✅ Elements are complete pieces of content (opening tag + content + closing tag)
• ✅ Tags are the keywords in angle brackets that define the element type
• ✅ Some tags are self-closing and don’t need closing tags
• ✅ Elements can be nested inside other elements
• ✅ Attributes provide additional information about elements
• ✅ Proper nesting order is crucial for valid HTML

🚀 What’s Next?

In our next lesson, we’ll learn about HTML Headings.

Ready to keep building your HTML skills? Let’s continue! 🌟