Understanding HTML Tags and Elements

Think of a webpage like a human body. The CSS is the skin and clothes (the style), JavaScript is the muscles (the movement), and HTML (HyperText Markup Language) is the skeleton. It provides the structure and tells the browser exactly what kind of content it is looking at—whether it's a heading, a paragraph, or a button.

What is an HTML Tag?

A tag is like a label. It tells the browser, "Everything inside here should be treated as a specific type of content." Tags are wrapped in angle brackets < >.

Most tags come in pairs:

1. Opening Tag (<p>): Tells the browser where the content starts.

2. Closing Tag (</p>): Tells the browser where the content ends (notice the forward slash /).

Tag vs. Element: What’s the Difference?

These terms are often used interchangeably, but there is a subtle difference:

• Tag: Just the markers (<h1> or </h1>).

• Content: The actual text or data inside.

• Element: The whole package—the opening tag, the content, and the closing tag combined.

Self-Closing (Void) Elements

Some elements don't have "content" in the traditional sense, so they don't need a closing tag. These are called Void Elements.

• <img>: Used to show an image.

• <br>: Used for a single line break.

• <hr>: Creates a horizontal line across the page.

Block-level vs. Inline Elements

This is one of the most important concepts for building layouts. Think of these as "The Box" vs. "The Text."

1. Block-level Elements

These elements always start on a new line and take up the full width available (like a block).

• Common tags: <div>, <h1> through <h6>, <p>, <ul>.

• Analogy: A brick in a wall.

2. Inline Elements

These elements do not start on a new line. They only take up as much width as necessary.

• Common tags: <span>, <a> (links), <strong> (bold).

• Analogy: A word inside a sentence.

Commonly Used Tags to Get Started