HTML Elements and Tags
1. Introduction
HTML documents are built entirely from elements — the individual building blocks that describe content. Each element is written using tags, which are keywords surrounded by angle brackets. Understanding the relationship between tags, elements, and content is the core skill of writing HTML. By the end of this lesson you will confidently create any HTML element from scratch.
2. Concept
Tags vs Elements
A tag is a keyword wrapped in angle brackets: <p>. An element is the complete unit — the opening tag, content, and closing tag together: <p>Hello</p>. Some elements are void (self-closing) and have no content or closing tag, such as <img>, <br>, and <hr>.
Element Anatomy
| Part | Example | Description |
|---|---|---|
| Opening tag | <p> |
Marks the start of the element |
| Content | Hello, world! |
Text or nested elements |
| Closing tag | </p> |
Marks the end; note the slash |
| Void element | <img src="pic.jpg" alt="Photo"> |
No content or closing tag |
<br> is correct. <br /> is also accepted (XHTML style) but unnecessary in HTML5.<p><strong>Bold</strong></p> ✓ not <p><strong>Bold</p></strong> ❌.<P> or <DIV>.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elements Demo</title>
</head>
<body>
<!-- Block-level elements -->
<h1>Main Heading</h1>
<p>A paragraph of text.</p>
<hr> <!-- void element: horizontal rule -->
<!-- Inline elements inside a block element -->
<p>
This word is <strong>bold</strong> and
this one is <em>italic</em>.
</p>
<!-- Void element with attributes -->
<img src="https://via.placeholder.com/200" alt="Placeholder image">
<br>
</body>
</html>
4. How It Works
Step 1 — Block vs Inline Elements
Block-level elements like <h1>, <p>, and <div> start on a new line and take up the full available width. Inline elements like <strong>, <em>, and <a> flow within text without forcing a new line.
Step 2 — Void Elements
<hr> and <br> have no content — they do not wrap anything. <img> is void too: the image content is fetched from the src attribute.
Step 3 — Nesting
The <p> element contains both text and inline children (<strong>, <em>). The browser creates a tree (DOM) reflecting this nesting, which CSS and JavaScript then operate on.
Step 4 — Case Convention
Always write tag names in lowercase. While browsers accept uppercase, every HTML linter, formatter, and team style guide enforces lowercase as the standard.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Card</title>
</head>
<body>
<div>
<img
src="https://via.placeholder.com/300x200"
alt="Wireless headphones on a white background"
>
<h2>Pro Wireless Headphones</h2>
<p>
Experience <strong>30-hour battery life</strong> and
<em>studio-quality sound</em> in a lightweight design.
</p>
<p>Price: <strong>$149.99</strong></p>
<hr>
<p><small>Free shipping on orders over $50.</small></p>
</div>
</body>
</html>
6. Common Mistakes
❌ Incorrectly nested elements
<p><strong>Bold text</p></strong>✓ Close inner elements before outer ones
<p><strong>Bold text</strong></p>❌ Missing closing tag on non-void elements
<div>
<p>Paragraph one
<p>Paragraph two
</div>✓ Close every non-void element explicitly
<div>
<p>Paragraph one</p>
<p>Paragraph two</p>
</div>7. Try It Yourself
8. Quick Reference
| Category | Examples | Behaviour |
|---|---|---|
| Block elements | <div>, <p>, <h1>–<h6> |
Start on new line; full width |
| Inline elements | <span>, <strong>, <a> |
Flow within text |
| Void elements | <img>, <br>, <hr>, <input> |
No closing tag |
| Nesting rule | Inner before outer | Prevents malformed DOM |
| Case convention | Always lowercase | Industry standard |