#11 Understanding HTML Tags and Elements
Think of HTML (HyperText Markup Language) as the skeleton of a webpage. Just as a skeleton provides the structure for a body, HTML provides the structure for a website. It tells the browser, "This is a heading," "This is a paragraph," or "This is an image."
Without HTML, the web would just be a wall of unorganized text.
1. What is an HTML Tag?
A Tag is a special keyword surrounded by angle brackets (< and >). Tags act like "instructions" for the browser. Most tags come in pairs:
Opening Tag:
<p>(Tells the browser: "Start a paragraph here")Closing Tag:
</p>(Tells the browser: "End the paragraph here")
2. Tag vs. Element: The Key Difference
People often use these words interchangeably, but they are slightly different.
The Tag: Just the markers (
<p>or</p>).The Content: The actual text or image inside.
The Element: The whole package (Opening Tag + Content + Closing Tag).
3. Self-Closing (Void) Elements
Some things on a webpage don't have "content" inside them—they just are. For example, an image or a line break. These are called Self-closing or Void elements because they don't need a separate closing tag.
<img>: For images.<br>: For a single line break.<hr>: For a horizontal line.
4. Block-level vs. Inline Elements
This is the most important concept for layout. Every HTML element has a default "display" behavior.
Block-level Elements
These always start on a new line and take up the full width available. Think of them as large boxes that stack on top of each other.
- Examples:
<div>,<h1>to<h6>,<p>,<ul>.
Inline Elements
These do not start on a new line. They only take up as much width as necessary. Think of them as labels on a shelf that sit side-by-side.
- Examples:
<span>,<a>(links),<strong>(bold text).
5. Commonly Used Tags
As you build your Next.js and React components, you'll use these constantly:
| Tag | Purpose | Type |
<div> | A generic container for other elements | Block |
<h1> | The main heading of a page | Block |
<p> | A paragraph of text | Block |
<a> | A hyperlink to another page | Inline |
<img> | Displays an image | Inline |
<span> | A generic container for text | Inline |
6. Try it yourself
If you are on your laptop in Indore right now, you can see HTML in action. Right-click anywhere on this page and select "Inspect". You will see the "Elements" tab, which shows you the exact HTML skeleton of this website.
