Introduction to HTML 🌐

What is HTML?

I'll never forget the first time I saw HTML do something “real.” I was in a high school computer lab, and the teacher told us to open Notepad, type <h1>Hi</h1>, and save it as index.html. When I double‑clicked that file and a clean web page popped up with a big bold “Hi,” I felt like I’d just hacked the Matrix.

But here’s the truth: HTML isn’t magic. It’s actually the simplest “language” you’ll ever meet—so simple that programmers don’t even call it a programming language. It’s a markup language. That just means it’s a way to put labels on text so the browser knows what’s a heading, what’s a paragraph, and what’s a link.

Think of it like this: if a website were a house, HTML would be the wooden frame—the walls, the doors, the roof. No paint, no furniture, no fancy curtains (that’s CSS and JavaScript). Just the structure that holds everything together.

Why Should You Care?

You might be thinking, “Cool story, but do I really need to learn this?”

Well, if you ever want to:

Build your own website without paying a developer
Tweak a blog or online store to look exactly how you want
Understand why that email you just designed looks broken in Gmail
Or just feel a little less clueless when someone says “just inspect element”

…then HTML is your starting line. The best part? You can learn the core stuff in an afternoon. And nobody—nobody—memorizes every tag. I’ve been doing this for years and I still Google “HTML how to make a dropdown” at least twice a week.

Let’s Build Something Real

Your First Webpage

Open Notepad (or TextEdit on a Mac, or VS Code if you’re feeling fancy). Copy this code—but seriously, type it yourself. Your fingers will thank you later.

<!DOCTYPE html>
<html>
<head>
  <title>My Corner of the Internet</title>
</head>
<body>

  <h1>Hey, I’m learning HTML!</h1>

  <p>I finally stopped just scrolling and started building. Turns out, it’s not that scary.</p>

  <h2>Things I’m into right now:</h2>
  <ul>
    <li>Writing code before my coffee kicks in</li>
    <li>Finding the perfect taco spot</li>
    <li>Rewatching old sitcoms for the 100th time</li>
  </ul>

  <p>Wanna connect? Ping me at <a href="https://example.com">hello@myfirstsite.com</a>.</p>

</body>
</html>

Save the file as my-first-site.html (make sure it ends with .html, not .txt), then double‑click it. Your browser will open it, and boom—you’ve just published your first webpage.

Notice how:

<h1> and <h2> give you different‑sized headings.
<ul> with <li> creates bullet points.
<a href=""> turns text into a clickable link.

A Few Tags You’ll Actually Use

You don’t need to learn a hundred tags to be dangerous. Here are the ones I use almost every day.

1. Headings (`<h1>` – `<h6>`)

Think of <h1> as the title of a book—you usually only use it once per page. <h2> is like a chapter title, <h3> a sub‑chapter, and so on. They help search engines (and screen readers) understand what your page is about.

2. The Humble `<div>`

<div> looks like it does nothing. It’s just a container. But that’s exactly why it’s so powerful. If you want to group a bunch of elements together—say, to move them around or style them later—you wrap them in a <div>. It’s your invisible box.

3. Images (`<img>`)

Images are a little different: they don’t have a closing tag.
<img src="your-image.jpg" alt="A description of the image">
The alt text is what shows up if the image fails to load, and it’s how someone using a screen reader “sees” your picture. Always include it—it’s a good habit.

What’s Next?

You’ve got your first page. Now what?

Break it on purpose. Delete a </h1> and see what happens. Change the <ul> to <ol> and watch the bullets turn into numbers. Breaking things is how you really learn.
View the source. Right‑click any website you like and choose “View Page Source.” You’ll see the HTML that built it. You won’t understand everything yet, but you’ll start spotting the same tags you just used.
Add some color. Right now your page is black text on a white background. Next time we’ll talk about CSS—that’s the paint, wallpaper, and furniture for your new digital house.

For now, just play with it. Change the text, add a new list item, maybe throw in an image. You’re not just browsing the web anymore—you’re one of the people who builds it.