HTML Fundamentals

What is HTML and why do we use it?

HTML stands for HyperText Markup Language.

HTML is the skeleton of a webpage.

Just like a human body needs a skeleton to hold everything together, a webpage needs HTML to give it structure.

HTML tells the browser:

• What is a heading

• What is a paragraph

• What is an image

• What is a link

Without HTML, a browser would have nothing meaningful to display.

HTML defines structure, not design or behavior.

---

HTML vs CSS vs JavaScript (quick clarity)

• HTML → Structure (bones)

• CSS → Styling (colors, layout)

• JavaScript → Behavior (interaction)

In this blog, we focus only on HTML basics.

---

What is an HTML tag?

An HTML tag is a keyword written inside angle brackets < >.

Tags tell the browser what kind of content something is.

Example:

<p>

This tag tells the browser:

“This content is a paragraph.”

Other examples:

<h1>
<div>
<span>

---

Opening tag, closing tag, and content

Most HTML tags come in pairs.

Example:

<p>Hello World</p>

Let’s break it down:

• <p> → Opening tag

• </p> → Closing tag

• Hello World → Content

Box analogy

Think of an HTML tag like a box:

• Opening tag → Opens the box

• Content → What is inside the box

• Closing tag → Closes the box

---

What is an HTML element?

An HTML element means the complete unit:

• Opening tag

• Content

• Closing tag

Example:

<p>Hello World</p>

This entire line is one HTML element.

Very important beginner clarification

• Tag → <p> or </p>

• Element → <p>Hello World</p>

Many beginners confuse these two — and that’s completely normal.

---

Self-closing (void) elements

Some HTML elements do not contain content.

They don’t need a closing tag.

These are called self-closing or void elements.

Common examples:

<br>
<img>
<input>
<hr>

Why no closing tag?
Because there is nothing to put inside these elements.

---

Block-level vs Inline elements

This concept controls how elements appear on the page.

---

Block-level elements

Block-level elements:

• Start on a new line

• Take the full width available

Common examples:

<h1>
<p>
<div>
<section>

Think of them as big blocks stacked one below another.

---

Inline elements

Inline elements:

• Do not start on a new line

• Take only the space they need

Common examples:

<span>
<a>
<strong>

Think of them as words inside a sentence.

---

Block vs Inline example

<p>This is a <span>simple</span> example</p>

• <p> is a block-level element

• <span> is an inline element

The paragraph forms a block.
The span stays inside the same line.

---

Commonly used HTML tags (Beginner-friendly)

Headings

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>

Paragraph

<p>This is a paragraph</p>

Containers

<div>Block container</div>
<span>Inline container</span>

Link

<a href="https://example.com">Visit Website</a>

Image

<img src="image.jpg" alt="Sample image">

---

Tag vs Element (Quick summary)

Remember:

Element = Tag + Content

---

Learn faster by inspecting HTML

One of the best ways to learn HTML:

1. Open any website

2. Right-click → Inspect

3. Look at the HTML structure

You will start recognizing tags everywhere.

---

Final takeaway

• HTML is the foundation of every webpage

• Tags describe content

• Elements are complete building blocks

• Some elements are self-closing

• Block and inline elements behave differently

Once these basics are clear, learning CSS and JavaScript becomes much easier.

HTML is simple — and that is exactly why it is powerful.