Understanding HTML Tags and Elements

Why do we need HTML?

When you open a website, you can see the text on the website, the headings and subheadings, and the text on the website. How do you solve this problem? Tim Berners-Lee is credited with creating HTML (HyperText Markup Language). If you use a website, you can change the text size and boldness.

What is HTML, and why do we use it?

HTML is the skeleton of a webpage. Just as a human body cannot stand without bones, a website cannot be built without HTML.

Think of HTML as the skeleton of a webpage. Just as your bones provide a structure for your muscles and skin to attach to, HTML provides the structural foundation for the text, images, and buttons you see online.

Without HTML, a website would just be a chaotic pile of unformatted text.

1. What is an HTML Tag? (The "Box" Analogy)

A tag is like a set of instructions or a physical box. It tells the browser, "Everything inside this box should be treated as a specific type of content."

• Opening Tag: The start of the box (e.g., <p>). It tells the browser where the effect begins.

• Content: What you put inside the box (the text or images).

• Closing Tag: The end of the box (e.g., </p>). It has a forward slash / to signal the end.

2. Tag vs. Element: What’s the Difference?

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

• The Tag: Just the markers (<p> and </p>).

• The Element: The entire package. It includes the opening tag, the content in the middle, and the closing tag.

Example:

<p>Hello World</p> is an element.

<p> is the opening tag.

3. Self-Closing (Void) Elements

Some boxes don't need a "closing lid" because they don't contain any text; they just represent a single thing. These are called Void Elements.

• <img>: Used to drop an image onto the page.

• <br>: Used for a simple line break (like hitting "Enter").

• <input>: Used for text boxes or buttons.

4. Block-Level vs. Inline Elements

How elements sit next to each other depends on their "display" type.

Block-Level

These elements are "greedy." They take up the full width available and always start on a new line. Think of them as large shipping crates stacked on top of each other.

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

Inline

These elements only take up as much width as necessary. They sit side-by-side like words in a sentence.

• Examples: <span>, <a> (links), <strong>.

5. Common "Starter" Tags

Tag	Name	Purpose
<h1>	Heading 1	The main title of the page.
<p>	Paragraph	Standard blocks of text.
<a>	Anchor	Creates a clickable link.
<div>	Division	A generic container used to group other elements.
<ul>	Unordered List	Creates a bulleted list.