HTML Basics: The Skeleton of the Web

Introduction: The Skeleton

If you imagine a website as a human body:

• HTML is the Skeleton (Structure).

• CSS is the Skin and Clothes (Style).

• JavaScript is the Muscles and Brain (Action).

A skeleton is what makes a body. HTML is the code that makes up every webpage you visit, from Google to Facebook. We're going to learn the basic building blocks of that foundation today: tags and elements.

The Anatomy of an HTML Tag

HTML stands for HyperText Markup Language. "Markup" means we wrap text in special markers to tell the browser what that text is.

These markers are called Tags. A tag is a keyword surrounded by angle brackets < >.

The 3 Parts:

Most HTML structures have three parts:

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

2. The Content: The actual text or image inside.

3. The Closing Tag: Tells the browser where the content ends. It looks like the opening tag but has a forward slash / (e.g., </p>).

Example:

<h1>Hello World</h1>

• <h1> = "Start a Heading here."

• Hello World = The text to display.

• </h1> = "End the Heading here."

Tag vs. Element: What’s the Difference?

You will hear developers use these words interchangeably, but there is a slight difference.

• Tag: Refers to just the code bits (<p> or </p>).

• Element: Refers to the entire thing—the opening tag, the content, and the closing tag together.

The Sandwich Example:

• The Bread is the Tags.

• The Whole Sandwich is the Element.

Special Case: Self-Closing (Void) Elements

Some elements don't hold any content. They don't wrap around text; they just do something. Because they have no content, they don't need a closing tag.

These are called Void Elements or Self-Closing Tags.

Examples:

• <br>: Creates a line break (like hitting Enter).

• <img>: Displays an image.

• <hr>: Draws a horizontal line.

<img src="pic.jpg">

<img src="pic.jpg"></img>

Block-Level vs. Inline Elements

This is one of the most important concepts for layout. HTML elements generally fall into two categories based on how they behave on the screen.

1. Block-Level Elements

Think of these as Boxes.

• They always start on a new line.

• They take up the full width available (stretching from left to right).

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

2. Inline Elements

Think of these as Words in a sentence.

• They do not start on a new line.

• They only take up as much width as necessary.

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

Example: If you put three <div>s (Block) next to each other, they will stack vertically. If you put three <span>s (Inline) next to each other, they will sit side-by-side on the same line.

Commonly Used Tags

You will use these tags 90% of the time:

• <div>: A generic container (Block). Used to group things.

• <span>: A generic text wrapper (Inline). Used to style specific words.

• <h1> to <h6>: Headings. h1 is the biggest, h6 is the smallest.

• <p>: Paragraph. Used for blocks of text.

• <a>: Anchor (Link). Used to link to other pages.

• <img>: Image. Used to show pictures.

• <ul> & <li>: Unordered List (Bullet points).

Pro Tip:

You can see the HTML of any website.

1. Open Chrome or Firefox.

2. Right-click on any element (like this text).

3. Click Inspect.

This opens the DevTools, showing you the exact HTML tags and elements used to build that page.