An HTML element is the building block of every web page. Understanding elements is fundamental — everything in HTML is an element.
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>Examples:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<a href="https://example.com">Visit Example</a>| Start Tag | Content | End Tag |
|---|---|---|
<h1> |
My First Heading | </h1> |
<p> |
My first paragraph. | </p> |
<a href="..."> |
Visit Example | </a> |
HTML elements can be nested — meaning elements can contain other elements. Every HTML document is a nest of elements inside elements.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Here:
<html> element is the root — it contains all other elements<body> element is inside <html><h1> and <p> elements are inside <body><b><i>text</b></i> — Right: <b><i>text</i></b>
Some HTML elements have no content and no end tag. These are called empty elements or void elements.
<br>
<hr>
<img src="photo.jpg" alt="Photo">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">| Empty Element | Purpose |
|---|---|
<br> | Line break |
<hr> | Horizontal rule / divider |
<img> | Embed an image |
<input> | Form input field |
<meta> | Page metadata |
<link> | Link external resource (e.g. CSS) |
HTML tags are not case sensitive. <P> means the same as <p>, and <H1> means the same as <h1>.
<P>This is valid.</P>
<p>This is also valid.</p>Some browsers may still display HTML correctly even if you forget end tags — but never rely on this. Missing end tags can cause unexpected errors.
<!-- Wrong (end tag missing) -->
<p>This is a paragraph.
<p>This is another paragraph.
<!-- Correct -->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>| Element | Description |
|---|---|
<html> | Root element of the page |
<head> | Contains meta information |
<title> | Page title shown in the browser tab |
<body> | Contains visible page content |
<h1> – <h6> | Headings (h1 = largest, h6 = smallest) |
<p> | Paragraph |
<a> | Hyperlink |
<img> | Image |
<ul> / <ol> | Unordered / Ordered list |
<li> | List item |
<table> | Table |
<div> | Block-level container |
<span> | Inline container |
<br> | Line break (empty element) |
<hr> | Horizontal line (empty element) |
<strong> | Bold / important text |
<em> | Italic / emphasized text |
</div> can silently break the layout of everything after it.
<b><i>text</b></i> closes in the wrong order. The last tag opened must be the first one closed: <b><i>text</i></b>.
<br>, <hr>, and <img> never have content or a closing tag — <br></br> is invalid HTML.
This small example nests three elements inside each other — a <span> badge inside a <button> inside a <div> — to show how nesting builds up a real UI piece:
<div class="border rounded p-3">
<button>
Inbox
<span class="badge bg-danger">3</span>
</button>
</div>Rendered result:
Q: What's the difference between an element and a tag?
A: A tag is just the markup like <p> or </p>. An element is the whole thing — the opening tag, its content, and the closing tag together.
Q: Can I nest a <p> inside another <p>?
A: No. <p> can only contain "phrasing content" like text, <span>, or <a> — nesting another <p> inside it is invalid and browsers will auto-close the outer one.
Q: Are all HTML5 tags case-insensitive?
A: Yes, tag and attribute names are case-insensitive, but the HTML specification recommends lowercase for consistency and readability.