HTML Introduction: The Talk Before the Tags

This is the lesson that comes before tags. Yes, there's something before tags. It's like reading the instructions before assembling furniture. Everyone skips it, then wonders why their chair has three legs.

Part 1

What Is HTML? (No, Seriously)

HTML stands for HyperText Markup Language. That's a fancy way of saying: "It tells browsers what's a heading, what's a paragraph, and what's a link that goes nowhere."

Think of HTML as the skeleton of a website. CSS is the skin and clothes. JavaScript is the personality (sometimes annoying).

The Skeleton

HTML = Structure
Without it, your website is just... content soup. Nobody wants content soup.

The Pretty Part

CSS = Style
Makes the skeleton look less... skeletal. Important, but not first.

The Brain

JavaScript = Behavior
Makes things move, click, and do stuff. Can't work without HTML first.

The Hard Truth

You can have a website with only HTML. You cannot have a website with only CSS or JavaScript.

HTML is the foundation. Everything else is decoration. Decorate a bad foundation = still bad.

The Simplest HTML Ever 
<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is a website. It's not much, but it's honest work.</p>
</body>
</html>

The !DOCTYPE Thing

That <!DOCTYPE html> at the top? It's not a tag. It's a declaration.
It tells the browser: "Hey, this is HTML5. Act accordingly."
Without it, browsers get confused. Confused browsers = bad times.

Part 2

How HTML Actually Works (The Magic Part)

HTML files are just text files. Seriously.
You write text with angle brackets, save it as .html, and browsers turn it into websites.
It's like magic, but with more typing and less wand-waving.

The Browser's Job

1. You give browser an HTML file
2. Browser reads it (like a really fast robot)
3. Browser builds a "DOM tree" (fancy family tree of elements)
4. Browser displays it
5. You complain about how it looks (that's where CSS comes in)

The Two Rules of HTML

Rule 1: Everything goes between <html> and </html>
Rule 2: Visible stuff goes between <body> and </body>

That's it. Follow these two rules, and you're 80% there. The other 20% is remembering to close your tags.

Common Beginner Mistakes

1. Forgetting to close tags (browsers hate this)
2. Putting content in the <head> (it won't show up)
3. Missing the !DOCTYPE (confuses old browsers)
4. Using spaces in file names (just don't)
5. Saving as .txt instead of .html (happens to everyone)

Your First HTML File (For Real)

Let's actually make something. Right now.
Open Notepad (or any text editor). Type this. Save it as "myfirstwebsite.html" Double-click it. Boom. Website.

1

Open Text Editor

Notepad, TextEdit, VS Code, whatever. Don't use Word. Word adds weird stuff. Just plain text.

2

Type The Code

Literally copy the code from above. Don't try to memorize it yet. Copying is learning. Really.

3

Save As .html

File → Save As Name: "myfirstwebsite.html" Important: Change "Save as type" to "All Files"

4

Open In Browser

Find the file. Double-click. Your default browser opens it. You made a website. Congrats.

5

Celebrate

You just made a website from scratch. It's boring. It's simple. But it's yours. And it works.

File Naming Matters

Prefer using lowercase
No spaces (use-hyphens-instead)
Always include .html extension
index.html is the "homepage" filename
Simple names are better than clever names

VS Code Cheat Code

Create a file named index.html. Type ! and press Enter. VS Code generates the boilerplate because typing it manually is pointless.

Emmet expansion in VS Code

Emmet expanding shorthand into responsibility.

Instant Result 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>

Skill Issue Alert

If nothing happened, Emmet is disabled. Or you pressed the wrong key. Browsers do not respond to hope.

Below is what the browser actually sees: a nested structure. Not magic. Just boxes inside boxes.

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
"The best way to learn HTML is to break it, then fix it. Then break it again. Then maybe cry a little. Then fix it again."

— Every web developer, probably

What You Actually Learned

  • HTML = Structure (CSS = Style, JS = Behavior)
  • Everything goes between <html> tags
  • Visible content goes in <body>
  • Always start with <!DOCTYPE html>
  • Save files as .html, not .txt
  • You can make a website with just 10 lines of HTML