HTML — The Skeleton

Here's where we left off at the end of Module 1. You now know that a website or app is made of layers. HTML, CSS, and JavaScript each have a job. They used to live in separate files. JavaScript makes things actually work.

Module 2 is where we slow down and really understand each of those three languages on its own terms. Not just "HTML is structure" — but why does structure need its own language? What would break if it didn't exist? What does it actually look like?

By the end of this module you should be able to look at any webpage and say "that part is HTML, that part is CSS, that part is JavaScript" — and know why each one is handling that job instead of one of the others.

Describing a newspaper

If you were going to describe a newspaper to someone who had never seen one — not what it looks like, just what's in it and how it's organized — how would you do that?

You'd probably say: there's a big headline at the top, then a smaller headline under it, then paragraphs of text, then maybe a photo, then another article starts below that.

That's HTML. HTML is just a way of describing what's on a page and what role each thing plays. This is a heading. This is a paragraph. This is an image. This is a list. This is a button.

It doesn't say what color the heading is. It doesn't say what happens when you click the button. It just says what things are.

Tags — labels for everything

HTML does this by wrapping everything in tags. A tag is just a label you put around something to tell the browser what it is.

<h1>Welcome to PetKarma</h1>

The <h1> is the opening tag. The </h1> is the closing tag. Everything in between is the content. And h1 means "heading level 1" — the most important heading on the page. Like the big headline on the front of a newspaper.

That's the entire concept of HTML. You wrap things in tags to describe what they are.

There are tags for everything:

• <h1> through <h6> — six levels of headings
• <p> — a paragraph
• <button> — a button
• <a> — a link
• <img> — an image
• <ul>, <ol> — unordered and ordered lists
• <input> — a text box you can type into
• <div> — a generic container (more on this later)
• <form> — a form to collect data

That's about 15 tags and you can build almost any website with just those.

HTML has zero opinion about how anything looks

If you write <h1>Welcome to PetKarma</h1>, the browser will make it big and bold because that's the default. But you can't tell it to be blue or centered or a specific font size using HTML. That's not HTML's job.

HTML only answers one question: what is this thing? Not what does it look like. Not what does it do. Just: what is it.

See it: A button in HTML

Here's what a button looks like when HTML is the only layer. No styling. No behavior. Just structure.

<button>Schedule Appointment</button>

That's it. The browser knows it's a button, so it renders one with its built-in defaults. It's there. It exists. But it's plain, unstyled, and clicking it does absolutely nothing. On the next page, we'll add CSS and see what changes.