Understanding HTML Tags and Elements
When you open any website in your browser, what you see—text, images, buttons, links—is built on top of HTML. HTML is the structure of the page: it says "this is a heading," "this is a paragraph," "this is a link." Without HTML, there would be no organized content—just raw text or chaos.
What Is HTML and Why Do We Use It?
The basic idea
HTML stands for HyperText Markup Language. Fancy name, simple idea:
Markup = you mark parts of your content (this is a heading, this is a paragraph, this is a link).
Language = a set of rules and words that the browser understands.
So HTML is a language for marking up content so the browser knows how to structure and display it.
HTML is the skeleton of a webpage
Think of a webpage like a person:
HTML = the skeleton (structure: head, body, arms, legs).
CSS = the skin and clothes (how it looks: colors, fonts, layout).
JavaScript = the muscles and nerves (how it moves and reacts).
If you don't have a skeleton, there's nothing to attach skin or muscles to. So HTML is the foundation: it defines what is on the page (headings, paragraphs, images, links) before we worry about how it looks or behaves.
Why do we use HTML
We use HTML because:
Browsers understand it – every web page is built from HTML (or something that produces HTML).
It gives structure – you can say "this is a title," "this is a paragraph," "this is a list."
It's accessible – screen readers and other tools use this structure to help people navigate.
It's the standard – the web is built on HTML. Learning is learning how the web is built.
So when you write HTML, you're not just typing text; you're describing the structure of a document that the browser (and other software) can understand and display.
What Is an HTML Tag?
Tags as labels
An HTML tag is a label you put around content to say what kind of content it is.
Think of it like a sentence in a language:
Opening tag = start of the sentence (e.g., "Here begins a paragraph.")
Content = the actual words (the text you see).
Closing tag = end of the sentence (e.g,. "End of paragraph.")
Or think of it like a box:
Opening tag = the start of the box (like an open lid).
Content = what's inside the box.
Closing tag = the end of the box (like closing the lid).
Opening tag, closing tag, and content
A tag is written with a name inside angle brackets: <name>.
Opening tag: <p> – "A paragraph starts here."
Content: the text that belongs to that paragraph.
Closing tag: </p> – "The paragraph ends here." The slash / means "closing."
Example:
<p>This is a paragraph.</p>
Breakdown:
- <p> = opening tag (paragraph starts).
- This is a paragraph. = content.
- </p> = closing tag (paragraph ends).
Another example:
<h1>Welcome to my site</h1>
<h1> = opening tag (heading level 1 starts).
Welcome to my site = content.
</h1> = closing tag (heading ends).
Visual diagram: tag structure
Opening tag Content Closing tag
↓ ↓ ↓
<p> This is a paragraph. </p>
└─────────────┬──────────────────┘
│
This whole thing
is one "element"
So: tags are the <p> and </p> parts. The content is what's between them. Together they form one element (we'll define that clearly in the next section).
What Does "HTML Element" Mean? (Tag vs Element)
Tag vs element – a common confusion
Beginners often use "tag" and "element" as if they're the same. They're related but not the same:
Tag = the actual syntax you write: <p> and </p>.
Element = the whole thing: opening tag + content + closing tag. It's the "unit" the browser works with.
So:
Tag = the labels (`<p>` and </p>).
Element = the labels plus the content (one complete "paragraph unit").
Simple analogy
Think of a shipping box:
Tags = the "Fragile" and "This side up" labels on the box.
Element = the entire box (labels + contents inside).
In HTML:
Tags = <p> and </p> (the markers).
Element = <p>Hello</p> (the whole paragraph: markers + "Hello").
ELEMENT (the whole thing)
┌─────────────────────────────────────┐
│ <p> This is a paragraph. </p> │
│ ↑ ↑ ↑ │
│ │ │ │ │
│ Opening Content Closing │
│ TAG TAG │
└─────────────────────────────────────┘
One element = opening tag + content + closing tag
So when we say "a paragraph element," we mean the entire <p>...</p> block, not just the word "tag." The browser thinks in elements; we write tags to create them.
Self-Closing (Void) Elements
Not everything has "content."
Some things in HTML don't have text content between tags. For example:
An image – the image file is loaded separately; there's nothing to put "inside" the tag.
A line break – it just means "new line here"; there's no content.
A horizontal rule – just a line; no content.
These are called void elements (or self-closing in casual talk). They don't have a closing tag because they don't wrap content.
How we write them
We write them with one tag that "closes itself." In HTML5, you can write:
- With slash: <br /> or <img src="photo.jpg" />
- Without slash: <br> or <img src="photo.jpg">
Both are valid in HTML5. The important part: no separate closing tag like </br> or </img>.
Examples:
<br>
Means: "line break here."
<img src="photo.jpg" alt="A photo">
Means: "show this image." The src and alt are attributes (extra info for the tag). There's no content between <img> and a closing tag—there is no closing tag.
Common void elements
| Tag | Purpose | Example |
|-------|----------------|-------------------|
| <br> | Line break | <br> |
| <hr> | Horizontal line| <hr> |
| <img> | Image | <img src="..." alt="..."> |
| <input> | Form input | <input type="text"> |
| <meta> | Page metadata | <meta charset="UTF-8"> |
So: void element = one tag, no content, no closing tag. The "element" is just that single tag (plus any attributes).
Block-Level vs Inline Elements
Why this matters
HTML elements are displayed in two main ways:
Block-level – the element takes a whole line (or block) and stacks vertically. It "blocks" the line.
Inline – the element sits inside a line of text and doesn't start a new line by itself.
This affects layout a lot: blocks stack; inlines flow with text.
Block-level elements
Block-level elements:
Start on a new line (by default).
Take the full width available (by default).
Stack one under the other.
Examples: <p>, <h1>–`<h6>`, <div>, <section>, <article>, <ul>, <li>.
┌─────────────────────────────────────┐
│ <p>First paragraph</p> │ ← Block: full width, own line
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ <p>Second paragraph</p> │ ← Block: next line, full width
└─────────────────────────────────────┘
So each block is like a new line that stretches across the container.
Inline elements
Inline elements:
Do not start a new line (by default).
Take only as much width as their content needs.
Sit inside a line of text (e.g., a word or phrase).
Examples: <span>, <a>, <strong>, <em>, <img> (often treated as inline).
This is a paragraph with <span>inline</span> and <a href="#">a link</a> in the same line.
↑ ↑
inline inline
So inlines flow with the text, like words in a sentence.
Diagram: block vs inline layout
Block (stacking):
Block 1 ─────────────────────────────
Block 2 ─────────────────────────────
Block 3 ─────────────────────────────
Inline (flowing):
Inline1 Inline2 Inline3 (same line, only as wide as content)
Common mistake: block inside inline
By default, you should not put a block-level element (like <p> or <div>) inside an inline element (like <span> or <a>). So this is invalid:
<a href="#"><p>Don't do this</p></a>
Valid is:
<p>Read <a href="#">this link</a> for more.</p>
So: blocks = structure and stacking; inlines = parts of a line (links, emphasis, spans).
Commonly Used HTML Tags
Here are the tags you'll use most often when starting. Keep examples short and try them in a small HTML file or in the browser's dev tools.
Structure and text
| Tag | Type | Purpose | Example |
|-------|-------|-------------------|----------------------------|
| <h1> – <h6> | Block | Headings (1 = biggest) | <h1>Title</h1> |
| <p> | Block | Paragraph | <p>A paragraph.</p> |
| <div>| Block | Generic block container | <div>...</div> |
| <span>| Inline| Generic inline wrapper | <span>word</span> |
Example:
<h1>My Page</h1>
<p>This is a paragraph.</p>
<div>This is a block container.</div>
<p>Here is a <span>highlighted</span> word.</p>
Links and images
| Tag | Type | Purpose | Example |
|-------|-------|-------------|----------------------------------------------|
| <a> | Inline| Link | <a href="https://example.com">Click</a> |
| <img>| Inline| Image (void)| <img src="pic.jpg" alt="Description"> |
Example:
<a href="https://example.com">Go to Example</a>
<img src="photo.jpg" alt="A nice photo">
Lists
| Tag | Type | Purpose | Example |
|-------|-------|----------------|------------------------|
| <ul> | Block | Unordered list | <ul><li>Item</li></ul> |
| <ol> | Block | Ordered list | <ol><li>First</li></ol> |
| <li> | Block | List item | <li>One item</li> |
Example:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Emphasis and meaning
| Tag | Type | Purpose | Example |
|----------|-------|----------------|------------------------|
| <strong> | Inline | Strong importance | <strong>Important</strong> |
| <em> | Inline | Emphasis | <em>Stress this</em> |
Example:
<p>This is <strong>important</strong> and <em>emphasized</em>.</p>
Minimal page structure
Every HTML page usually has at least this skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Welcome</h1>
<p>Your content here.</p>
</body>
</html>
- <!DOCTYPE html> = "this document is HTML5."
- <html> = root element; wraps everything.
- <head> = metadata (title, charset, etc.); not visible on the page.
- <body> = visible content: headings, paragraphs, links, images.
You don't have to memorize everything at once. Start with <p>, <h1>, <div>, <span>, <a>, and <img>, Then add lists and structure tags as you need them.
Inspect HTML in the Browser
Why inspect?
Real websites are full of nested elements. To see how they're built:
Right-click on the page → Inspect (or Inspect Element).
The Elements (or Inspector) tab shows the live HTML the browser is using.
You can expand and collapse tags to see the parent/child structure.
You can hover over a tag and see the corresponding block or inline area on the page.
What to look for
Tags – opening and closing tags, and how they nest.
Elements – whole blocks (e.g., one <p>...</p> or one <div>...</div>).
Block vs inline – which elements take a full line and which sit in a line of text?
Spending a few minutes inspecting a simple page (e.g., a blog post or a news article) will make "tag" and "element" and "block vs inline" much more concrete.
Happy coding!’
