Understanding HTML Tags and Elements

---

What is HTML?

HTML (HyperText Markup Language) is the skeleton of every webpage.
It defines structure:

• Headings

• Paragraphs

• Images

• Links

• Buttons

CSS makes it pretty. JavaScript makes it interactive.
But HTML builds the foundation.

What is an HTML Tag?
Tags are instructions wrapped in angle brackets < >.
They tell the browser: "This is a heading" or "This is a paragraph."
Example:

<p>This is a paragraph</p>

Breaking it down:

• <p> - Opening tag (starts the paragraph)

• This is a paragraph - Content (what's displayed)

• </p> - Closing tag (ends the paragraph)

Anatomy of a Tag

<tagname>Content goes here</tagname>

Opening tag: <tagname> Content: The text or other elements inside Closing tag: </tagname> (has a forward slash /)

Tag vs Element: What's the Difference?
People often use these words interchangeably. But technically:

Tag: The markup itself (<p> or </p>)

Element: The complete structure (opening tag + content + closing tag)

<p>Hello World</p>

• Tags: <p> and </p>

• Element: The entire thing (both tags + content)

Think of it like this:

• Tags are the brackets [ ]

• Element is the brackets + what's inside [content]

Self-Closing (Void) Elements
Some elements don't need closing tags because they don't contain content.

Examples:

<img src="logo.png" alt="Logo">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">

These are void elements or self-closing elements.
They don't wrap content, so no closing tag needed.

Common void elements:

• <img> - Images

• <br> - Line break

• <hr> - Horizontal rule

• <input> - Form inputs

• <link> - CSS links

• <meta> - Metadata

Block-Level vs Inline Elements
HTML elements behave differently based on their type.

Block-level elements:

• Take up full width available

• Start on a new line

• Stack vertically

Examples:

<div>Block element</div>
<p>Another block</p>
<h1>Heading</h1>
<section>Section</section>

Visual:

┌──────────────────────┐
│    Block Element     │
└──────────────────────┘
┌──────────────────────┐
│   Another Block      │
└──────────────────────┘

Inline elements:

• Take up only as much width as needed

• Don't start on a new line

• Flow with text

Examples:

<span>Inline</span>
<a href="#">Link</a>
<strong>Bold</strong>
<em>Italic</em>

Visual:

This is text with <span>inline</span> and <a>link</a> elements flowing together.

---

Commonly Used HTML Tags

Headings:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller heading</h3>
<!-- h1 to h6 available -->

Text content:

<p>Paragraph of text</p>
<span>Inline text container</span>
<strong>Bold text</strong>
<em>Italic text</em>

Containers:

<div>Generic block container</div>
<section>Thematic grouping</section>
<article>Independent content</article>
<header>Top section</header>
<footer>Bottom section</footer>

Lists:

<ul>
  <li>Unordered list item</li>
  <li>Another item</li>
</ul>

<ol>
  <li>Ordered list item</li>
  <li>Another item</li>
</ol>

Links and Images:

<a href="https://example.com">Click me</a>
<img src="image.jpg" alt="Description">

Forms:

<form>
  <input type="text" placeholder="Name">
  <button type="submit">Submit</button>
</form>

Quick Reference Table

Try It Yourself
Open any webpage. Right-click → "Inspect" or press F12.
You'll see the HTML structure. Every element, every tag.

Create a simple HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is my first webpage!</p>
  <a href="https://google.com">Visit Google</a>
</body>
</html>

Save as index.html. Open in browser. You just built a webpage.

Common Beginner Mistakes

Forgetting closing tags

<p>This is wrong

Always close tags

<p>This is correct</p>

Incorrect nesting

<p><strong>Wrong order</p></strong>

Proper nesting

<p><strong>Correct order</strong></p>

Adding closing tag to void elements

<img src="logo.png"></img>  <!-- Wrong -->

Self-closing or no closing tag

<img src="logo.png">  <!-- Correct -->

Key Takeaways

Tags are the markup (<p>, </p>)
Elements are tags + content
Most tags need closing tags, some don't (void elements)
Block elements stack vertically, take full width
Inline elements flow with text, take minimal width
HTML provides structure; CSS adds style

You Now Understand HTML Structure
Tags and elements are the building blocks.
Master these fundamentals, and the rest of HTML becomes easier.
Start simple. Build projects. Inspect websites. Practice.
Every website you see is just HTML elements arranged thoughtfully.

Now go build something.

---