HTML Elements
In this page:
The Structure of an Element
Most HTML elements require an opening tag, the inner content, and a closing tag that contains a forward slash. Forgetting the closing tag is one of the most common beginner mistakes and can break the layout of everything after it.
Note: Always close your tags in the reverse order that you opened them to avoid layout breaks.
Warning: Forgetting a closing tag can cause subsequent elements to merge incorrectly or display unexpected styling.
Example: The Structure of an Element
<p>This is the inner content.</p>Nested Elements
HTML allows you to place elements inside other elements. This is called nesting, and it is how we build complex web layouts. Proper nesting matters: tags must close in the reverse order they opened, or the browser will try to auto-correct your markup unpredictably.
Note: Use indentation in your code editor to easily see which elements are nested inside others.
Warning: Overlapping tags without proper nesting order can cause browser parsing errors.
Example: Nested Elements
<div>
<p>Nested inside a div.</p>
</div>Empty Elements
Some elements do not have any content or closing tags. These are called empty or self-closing elements, and they are used to insert things like images, line breaks, or metadata. Common examples include img, br, hr, and input -- writing a closing tag for these is either ignored or invalid depending on the element.
Note: In modern HTML5, you do not need to add a trailing slash to empty tags.
Warning: Do not try to add content between an opening and closing tag for empty elements like br or img.
Example: Empty Elements
<img src="photo.jpg" alt="Photo">
<br>
<hr>
<input type="text">Block vs Inline Elements
Block-level elements like div and p always start on a new line and take up the full available width, while inline elements like span and a sit within the flow of surrounding text without forcing a line break.
Example: Block vs Inline Elements
<div>
<p>Block elements start on a new line.</p>
<span>Inline</span> <a href="#">elements</a> stay in the flow.
</div>Void Elements Reference
Beyond img, br, and input, HTML defines a fixed list of void elements including hr, meta, link, and source, all of which never contain content or a closing tag by specification.
Example: Void Elements Reference
<hr>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<source src="video.mp4" type="video/mp4">- Overlapping tags in the wrong nesting order instead of closing them sequentially.
- Attempting to write closing tags for self-closing empty elements.
- Using the wrong tag names or misspelling elements in your layout structure.
- An HTML element represents the opening tag, the content, and the closing tag.
- Nesting elements inside each other is the key to building complex web pages.
- Empty elements contain only attributes and do not have closing tags.
All standard HTML elements are supported globally across all modern platforms.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: