LESSON 1 COMPLETE
Loading Lesson 2...
🌐 WEBSITE 101 · LESSON 1 OF 5
LESSON 1 OF 5

Your First HTML File

🌱 Beginner ✅ Free ⏱ ~10 min

// what is html?

HTML stands for HyperText Markup Language. It is not a programming language. It does not run logic or make decisions. It is a labelling system — you are telling the browser what things are.

A heading is a heading. A paragraph is a paragraph. A link is a link. The browser reads those labels and renders them on screen. That is the entire concept.

Key idea: HTML is not about how things look. That is CSS. HTML is about what things are. Structure first. Style second. Always.

// elements and tags

Everything in HTML is an element. Elements are written as tags. Most tags come in pairs — an opening tag and a closing tag. The content goes between them.

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<a href="https://antcpu.com">This is a link</a>

The tag name tells the browser what the element is. <h1> is the most important heading. <p> is a paragraph. <a> is a link — the href attribute tells it where to go.

// the minimal valid html file

Every HTML file needs a basic structure. This is the minimum a browser expects:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world.</h1>
  <p>This is my first webpage.</p>
</body>
</html>

<!DOCTYPE html> — tells the browser this is an HTML5 document.

<head> — metadata the browser needs but doesn't display. Title, charset, viewport.

<body> — everything the user actually sees goes here.

// why the viewport meta tag matters

Without it, mobile browsers zoom out and show a tiny desktop version of your page. With it, the page renders at the correct size on every device. Always include it.

// common elements you'll use every day

<h1> through <h6> — headings. h1 is the most important. Use only one h1 per page.

<p> — paragraph. The default container for text.

<a href=""> — anchor link. The foundation of the web.

<img src="" alt=""> — image. Self-closing — no closing tag needed.

<div> — a generic container. No meaning on its own. Used for layout.

<ul> / <li> — unordered list and list items.

// try it

Open a plain text editor — Notepad on Windows, TextEdit on Mac (set to plain text). Paste the minimal HTML file from above. Save it as index.html on your desktop. Open it in Chrome. You just built a webpage. Right-click it and choose View Page Source — that's your code running live in a browser.

← previous
Day Class · 1:00pm EST Night Class · 6:00pm EST