Understanding HTML Tags and Elements
If you’ve ever wanted to build a website, you have to start with HTML. It is the absolute foundation of every page on the internet.
Think of a webpage like a house. The furniture and wallpaper are the CSS, and the electricity and plumbing are the JavaScript. But the HTML? That is the wooden frame and the bricks. It’s the skeleton that holds everything together.
What is an HTML Tag?
In the real world, we use body language and tone to explain what we mean. In the digital world, we use tags to tell the browser how to treat a piece of text.
A tag is like a pair of bookends. It tells the browser, "Everything between these two points is a paragraph," or "Everything here is a big heading."
Opening Tag:
<p>(Starts the instruction)Closing Tag:
</p>(Ends the instruction—notice the forward slash!)Content: The actual text or image inside.
Tag vs. Element: What’s the Difference?
These terms are often used interchangeably, but there is a slight difference that will make you sound like a pro if you get it right:
The Tag: Just the markers (
<p>or</p>).The Element: The whole package—the opening tag, the content, and the closing tag combined.
The Exceptions: Self-Closing (Void) Elements
Most elements act like containers, but some don't need a closing tag because they don't hold any content. They just "exist" at a specific spot. These are called Void Elements.
- Example:
<img>(to show a picture) or<br>(to create a line break). You don't put text inside an image, so you don't need to close it!
How Elements Sit on the Page: Block vs. Inline
This is where most beginners get frustrated, but it’s simple once you see the "box" logic.
1. Block-level Elements
These are the "greedy" elements. They always start on a new line and take up the full width available, pushing everything else down.
Common Tags:
<div>,<h1>,<p>,<ul>.Analogy: A brick in a wall.
2. Inline Elements
These are the "social" elements. They only take up as much space as their content needs and sit side-by-side with other elements.
Common Tags:
<span>,<a>(links),<strong>(bold).Analogy: A word inside a sentence.
A Quick Starter Kit of Common Tags
You don't need to memorize hundreds of tags to start. These few do 90% of the work:
| Tag | Name | Use Case |
<h1> to <h6> | Headings | Titles and subtitles (H1 is the biggest). |
<p> | Paragraph | Standard blocks of text. |
<a> | Anchor | Creating clickable links. |
<img> | Image | Displaying pictures. |
<ul> / <li> | Lists | Bullet points for organized data. |
<div> | Division | A generic container used to group other elements. |