🌐 Web Development Roadmap — Part 12

🏗️ HTML — What Is HTML and Why Do We Need It?

HTML is the first major technology we'll learn for building websites.

1️⃣ What Is HTML?

HTML stands for:

HyperText Markup Language

HTML is the standard markup language used to structure content on webpages.

In simple words:

HTML tells the browser what content exists on a webpage and what each piece of content represents.

For example, a webpage might contain:

• A heading

• Paragraphs

• Images

• Links

• Buttons

• Lists

• Forms

• Tables

HTML provides the structure for these elements.

2️⃣ HTML Is Not a Programming Language

This is an important distinction.

HTML is a markup language, not a programming language.

HTML describes the structure and meaning of content.

For example:

<h1>My Portfolio</h1>
<p>Welcome to my website.</p>

There is no programming logic here.

We're simply telling the browser:

"This is a main heading."

and:

"This is a paragraph."

JavaScript, on the other hand, can perform programming logic:

let age = 25;

if (age >= 18) {
    console.log("Adult");
}

So remember:

• HTML → Structure

• CSS → Appearance

• JavaScript → Behaviour and logic

3️⃣ How HTML Works

HTML uses elements to describe content.

For example:

<h1>Hello World</h1>

The browser interprets this as a heading.

Another example:

<p>Welcome to my website.</p>

The browser interprets this as a paragraph.

The browser then turns the HTML structure into the webpage you see.

4️⃣ HTML Elements

An HTML element commonly consists of:

<tag>Content</tag>

For example:

<p>Hello</p>

Here:

• <p> → Opening tag

• Hello → Content

• </p> → Closing tag

Together, they form an HTML element.

Another example:

<h1>Web Development</h1>

The entire thing is an HTML element.

5️⃣ HTML Tags

A tag is the markup used to define an element.

Examples:

• <h1>

• <p>

• <a>

• <img>

• <button>

Different tags represent different types of content.

For example:

<h1>My Website</h1>

h1 represents a heading.

<p>Hello everyone.</p>

p represents a paragraph.

<button>Login</button>

button represents a button.

6️⃣ A Simple HTML Page

A basic HTML document looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>

<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Don't worry if you don't understand everything yet.

We'll learn each part separately.

For now, understand the overall structure.

7️⃣ <html>

The <html> element represents the root of the HTML document.

Most of your HTML page exists inside it.

<html>
    ...
</html>

Think of it as the outer container of the document.

8️⃣ <head>

The <head> contains information about the webpage that generally isn't displayed as the main page content.

For example:

<head>
    <title>My Website</title>
</head>