HTML Basics: The Skeleton of the Web

If you imagine a website as a human body, HTML (HyperText Markup Language) is the skeleton. Just as bones give a body structure and hold everything in place, HTML provides the structure for a webpage. It tells the browser where the headings go, where the paragraphs sit, and where images belong.

Without HTML, the web would just be a blob of unformatted text.

What is an HTML Tag?

Think of an HTML tag like a storage box.

• You have an opening tag (opening the box).

• You put content inside (the stuff in the box).

• You have a closing tag (taping the box shut).

Tags are keywords surrounded by angle brackets, like <tagname>. They tell the browser how to display the content inside them.

The Anatomy of a Tag

Here is the standard syntax:

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

• Opening Tag: <p> (Starts the paragraph)

• Content: This is a paragraph. (The text you see on the screen)

• Closing Tag: </p> (Ends the paragraph—notice the forward slash /)

---

Tags vs. Elements: What's the Difference?

New developers often use these terms interchangeably, but there is a distinct difference.

• Tag: The code bits in the brackets (e.g., <h1> or </h1>).

• Element: The entire package, from the opening tag to the closing tag, including the content inside.

Formula: Opening Tag + Content + Closing Tag = HTML Element

Visualizing the Breakdown

Element
┌──────────────────────────────┐
<button> Click Me </button>
└─┬────┘ └──┬───┘ └───┬─────┘
Opening   Content   Closing
  Tag                 Tag

Self-Closing (Void) Elements

Some elements don't hold content. Since they don't have "stuff" inside them, they don't need a closing tag. These are called self-closing or void elements.

Common examples:

• <br>: Inserts a line break.

• <img>: Embeds an image.

• <hr>: Creates a horizontal line.

Block-Level vs. Inline Elements

Understanding how elements sit on the page is crucial for layout.

1. Block-Level Elements

These are the "greedy" elements. They always start on a new line and take up the full width available (like a block stretching from left to right).

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

• Visual: Imagine stacking cardboard boxes vertically on top of each other.

2. Inline Elements

These are the "social" elements. They do not start on a new line; they only take up as much width as necessary and sit happily next to other elements.

• Examples: <span>, <a> (links), <b> (bold)

• Visual: Like words in a sentence flow from left to right.

Analogy:

• Block elements are like houses on a street (each takes up a specific plot of land).

• Inline elements are like furniture inside the house (they sit next to each other within the space).

---

Commonly Used Tags

Here are the essentials you will use 90% of the time: