Understanding HTML Tags and Elements

What is HTML and why do we use it?

Think of HTML as the skeleton of a webpage.

• It gives structure to our content

• Tells the browser what goes where

• Without HTML, a webpage is just a blank screen

Example:

<h1>Hello, World!</h1>
<p>Welcome to our first webpage.</p>

Here, the <h1> and <p> tags tell the browser:

• <h1> → Big heading

• <p> → Paragraph text

---

What is an HTML tag?

A tag is like a label that tells the browser what kind of content it’s looking at.

• Opening tag: starts the element, e.g., <p>

• Closing tag: ends the element, e.g., </p>

• Content: the text or elements in between

Example:

<p>This is a paragraph.</p>

• <p> → opening tag

• </p> → closing tag

• This is a paragraph. → content

---

What is an HTML element?

An HTML element is the combination of the opening tag, closing tag, and content.

In the previous example:

<p>This is a paragraph.</p>

The entire line is the element.

Think of it like a boxed section:

• Tag = label on the box

• Content = what’s inside the box

• Element = the box + label + content

---

Self-closing (void) elements

Some elements don’t need a closing tag because they don’t wrap content. These are called void or self-closing elements.

Common examples:

<img src="logo.png" alt="Logo">
<br>
<hr>

• <img> → displays an image

• <br> → line break

• <hr> → horizontal line

---

Block-level vs Inline elements

Block-level elements

• Take up full width

• Start on a new line

• Examples: <div>, <p>, <h1>

Inline elements

• Take up only the space they need

• Can sit next to other elements

• Examples: <span>, <a>, <strong>

Analogy:

• Block = big boxes stacked vertically

• Inline = small stickers you can place next to each other

---

Commonly used HTML tags

Here’s a small starter list:

---

Tips for learners

• Open any webpage, right-click → Inspect → explore the HTML

• Try editing HTML in browser dev tools to see changes live

• Keep examples short and visual

• Don’t worry about remembering everything at once; just get familiar with the basics