What Is HTML & How the Web Works

Feb 25

Before you write a single line of code, let's understand what you're actually building — and why HTML is the backbone of every website you've ever visited.

📖 8 min read 🟢 Beginner

In This Article

What Is HTML, Really?
How the Web Works (The 30-Second Version)
HTML, CSS & JavaScript — The Power Trio
Your Very First HTML Page
How to Practice
Mini Challenge

What Is HTML, Really?

HTML stands for HyperText Markup Language. That sounds intimidating, so let's break it down in plain language.

HyperText just means "text that links to other text." When you click a link on a website and it takes you somewhere new? That's hypertext in action. Markup Language means it's a system of labels (called "tags") that tell the browser what your content is. A heading. A paragraph. An image. A list.

HTML is not a programming language — and that's totally fine. It doesn't do calculations or make decisions. It structures content. Think of it like the skeleton of a building. Without bones, everything collapses. Without HTML, a website is just a pile of words and images with no shape.

If someone ever tries to gatekeep you by saying "HTML isn't a real language," smile and remember: literally every website on the internet depends on it. Every. Single. One.

How the Web Works (The 30-Second Version)

Here's what happens every time you visit a website:

You type a URL (like www.codherway.com) or click a link.
Your browser sends a request to a server — a computer somewhere in the world that stores that website's files.
The server sends back files — HTML, CSS, JavaScript, images, etc.
Your browser reads those files and renders (draws) the webpage on your screen.

The HTML file is always the first thing the browser reads. It's the foundation document. Everything else — the styling, the interactivity, the images — plugs into it.

HTML, CSS & JavaScript — The Power Trio

You'll hear these three mentioned together constantly, so let's clarify the roles now:

HTML = Structure. What things are. "This is a heading. This is a paragraph. This is a navigation menu."
CSS = Style. How things look. "Make this heading purple. Give this section a gradient background. Center this image."
JavaScript = Behavior. What things do. "When the user clicks this button, show a pop-up. Fetch new data every 5 seconds."

In this course, we're focused on HTML — the foundation you need before everything else makes sense. You wouldn't decorate a house that hasn't been built yet, right?

Your Very First HTML Page

Let's look at the simplest possible HTML page so you can see what we're working with:

index.html

<!-- This is a comment. The browser ignores it. -->
<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>I just wrote my first HTML page.</p>
  </body>
</html>

Don't worry about memorizing every piece. Here's the big picture of what's happening:

<!DOCTYPE html> tells the browser "this is a modern HTML document."
<html> wraps everything.
<head> holds invisible setup stuff (like the page title that shows in your browser tab).
<body> holds everything the user actually sees on the page.
<h1> is a top-level heading. <p> is a paragraph.

What the browser shows

Hello, world!

I just wrote my first HTML page.

That's it. That's a real webpage. Simple, yes — but every complex website you admire started from something just like this.

How to Practice

You don't need to install anything fancy to start writing HTML. Here are two easy options:

Option 1: Use an online editor

Go to CodePen and paste HTML into the HTML panel. You'll see the result instantly. This is perfect for experimenting.

Option 2: Use a real code editor (recommended)

Download VS Code (free!).
Create a new file and save it as index.html.
Type your HTML, save, and open the file in your browser.

In VS Code, if you type ! and press Tab, it auto-generates a full HTML starter template. Try it — it's like magic.

🏆 Mini Challenge

Create your first HTML file from scratch. It should include:

The basic HTML structure (<!DOCTYPE html>, <html>, <head>, <body>)
A page title that says your name
An <h1> heading that says "Hello! I'm [Your Name]"
A <p> paragraph explaining why you want to learn to code

Save it as index.html and open it in your browser. Congratulations — you're officially a web developer in training. 🎉

Jenna Zawaski