What the Heck is HTML (and Why You Should Care)
Before we write a single tag, let’s get one thing straight: HTML isn’t just some outdated markup language from the Geocities era. It’s the bedrock of the web. Every beautifully styled layout, every slick JavaScript interaction, every “wow, this page loads fast” moment — it all starts with HTML. And if you're a JavaScript dev who’s skipped past it with a shrug? Buckle up. This lesson might sting a little — but in a good way.
HTML: Not Just for Blog Posts from 2003
When I first started coding, I treated HTML like it was the opening act before the “real” show — you know, JavaScript. I skimmed it, slapped some <div>s down, and moved on. Years later, I cracked open one of my old projects and... wow. I had nested <div>s six levels deep. I didn’t use a single semantic tag. There was no structure, no accessibility, no logic. It was digital lasagna.
And that’s the trap. HTML looks simple, so we treat it like it doesn’t matter. But here’s the truth: if your HTML sucks, everything built on top of it does too. It’s like building a React app on top of a Jenga tower.
Want better SEO? Want your site to work without JavaScript? Want assistive tech to understand your content? Start here. With the bones.
You Speak JavaScript. The Browser Speaks HTML.
As JS devs, we get obsessed with the logic. The interactivity. The animations. But browsers? They don’t care about how clever your components are. They care about structure. They care about meaning.
HTML is how we communicate with browsers. We tell them: “This is a heading. This is a button. This is an image of my dog wearing sunglasses.” When we use the wrong tags, we’re basically mumbling to the browser. And browsers — like people — don’t respond well to mumbling.
For example: ever used a <div> when you should’ve used a <button>? Sure, it looked right. But it probably wasn’t keyboard-accessible, screen readers skipped it, and your Lighthouse score took a nosedive.
Semantic HTML isn’t just nice. It’s necessary. Especially for a portfolio site, where you want to look like a dev who actually knows their craft.
Div Soup Is Not a Meal (and Google Hates It)
Here’s a hard truth: Googlebot is a robot. It doesn’t care how pretty your site is. It cares about how well it can understand it. Semantic HTML gives it that clarity.
I once built a blog where every section was a <div class="thingy">. Headers? Divs. Articles? Divs. Lists? You guessed it — divs. It looked fine, but it never ranked in search. After a rewrite using actual semantic elements — <header>, <article>, <nav>, <footer> — my traffic jumped. No extra content. Just better structure.
If you’re skeptical, check out WebAIM’s screen reader survey. It’ll give you a sense of how real people rely on semantic HTML — not style — to navigate.
The Portfolio Project: Let’s Build Something Real
We’re not just talking theory in this course. We’re building your personal portfolio from the ground up.
By the end of it, you’ll have:
A Home page with a strong intro and CTA An About page that tells your story A Projects page with clean, semantic structure A Contact page with an accessible form
We’ll build each page as we go, starting simple and layering on more complex elements with each chapter. Don’t worry about CSS or JS yet — right now, it’s all about structure.
Let’s kick things off by setting up your project folder:
mkdir html-portfolio
cd html-portfolio
touch index.html
Inside that index.html, just drop this for now:
<!-- Hello, world. I’m about to learn HTML the right way. -->
That comment? It’s your line in the sand. We’re doing this right from here on out.
What’s Next?
Next up, we’ll get your environment set up and write your first real HTML document — the right way. We’ll walk through boilerplate code, explain what actually matters in the <head>, and peek inside how browsers parse your HTML like a script for a play. You can dive into the next lesson, VS Code, Boilerplate & How Browsers Read HTML, to keep the momentum going.
Let’s go from “Hello, world” to “Hire me, world.”