HTML Tutorial: HTML Elements
Understanding elements + colorful examples + input & output results
An HTML Element is everything from the start tag to the end tag.
Basic structure:
<tagname> Content </tagname>
1️⃣ Example of an HTML Element
INPUT (Colored Code):
<p>
This is a paragraph.
</p>
OUTPUT (Browser Result):
This is a paragraph.
✔️ <p> = Opening tag ✔️ Text = Content ✔️ </p> = Closing tag
2️⃣ Nested HTML Elements
Elements can be placed inside other elements. This is called nesting.
INPUT:
<body>
<h1>
Welcome
</h1>
<p>
Learning HTML is fun.
</p>
</body>
OUTPUT:
Welcome
Learning HTML is fun.
✔️ <h1> and <p> are inside <body>
✔️ Always close inner elements before outer elements
3️⃣ Empty HTML Elements
Some elements do not have closing tags. These are called empty elements.
INPUT:
<p>
First Line
</p>
<hr>
<p>
Second Line
</p>
OUTPUT:
First Line
Second Line
✔️ <hr> = Horizontal line
✔️ No closing tag needed
4️⃣ Block vs Inline Elements
Block Element Example
INPUT:
<h2>
Heading Example
</h2>
<p>
Paragraph Example
</p>
OUTPUT:
Heading Example
Paragraph Example
✔️ Block elements start on a new line
Examples: <h1>, <p>, <div>
Inline Element Example
INPUT:
<p>
This is
<strong>
important
</strong>
text.
</p>
OUTPUT:
This is important text.
✔️ Inline elements do NOT start on new line
Examples: <strong>, <span>, <a>
🎯 Important Rules
- Close elements properly
- Do not overlap tags
- Use correct nesting order
- Keep code clean and indented
🚀 What’s Next?
Next lesson:
👉 HTML Attributes
You will learn:
- What attributes are
- How to add extra information
- Common attributes like href, src, alt
Understanding elements is key to mastering HTML.