HTML isn't coding. It's labeled text.
Most kids think HTML is some scary programming thing. It isn't. HTML is just writing with little labels around the writing that tell a browser how to show it. Labels on the outside, text on the inside. That's the whole idea.
Take any sentence you've ever written:
That's HTML. <p>
means "this is a paragraph." The slash version </p> means "paragraph is over now."
Open-label, your text, close-label. That's 90% of HTML.
Every HTML tag follows the same shape: open, content, close. Once you see this pattern, HTML stops being intimidating. It's just labeled writing.
Pick the thing your page will be about.
This page won't be about "me" in general. It'll be about one specific thing you care about — a dog, a bike, a game, a band, a book, a place. One thing, one page. You can make more pages later.
If you did Skills Workshop Module 01, you can use the same thing. That's actually a good idea — you'll have details ready to go.
Five tags will do 90% of what you need.
HTML has dozens of tags. You only need five to build a real page that looks great and says something real. Here they are.
The big title
The main headline of your page. Every page gets exactly one. It should be the loudest thing on the page.
Section titles
Smaller headings that split your page into sections. You can have as many of these as you need.
A paragraph
The workhorse. Any block of writing goes in a <p>. Most of your page will be made of these.
A bullet list
For lists of things. <ul> wraps the whole list, each <li> is one bullet. Always used together.
<li>Scar on left ear</li>
<li>Loves cookies</li>
</ul>
Make it bold
Wrap around a word or phrase to emphasize it. The browser shows it as bold text.
That's actually all you need. Real websites use more tags for things like images and links, but the five above are enough to build a page that looks like writing — a real, readable, respectable page. You'll see.
Here's a complete HTML page.
This is a real, working file. If you save it as buddy.html
on your computer and double-click it, a browser will open and show it.
No server, no installation, no anything. Just a file that the browser
knows how to read.
<!-- A webpage about my dog Buddy --> <!DOCTYPE html> <html> <head> <title>My Dog Buddy</title> </head> <body> <h1>My Dog Buddy</h1> <p>This is a page about the best dog in our neighborhood, Buddy. He's a 3-year-old golden retriever who has very specific opinions.</p> <h2>Things only I know about him</h2> <ul> <li>He only answers to his name in a <strong>higher pitch</strong>.</li> <li>He refuses all normal treats except peanut butter cookies.</li> <li>He has a small scar on his left ear he's <strong>kind of proud of</strong>.</li> <li>He only barks at one specific neighbor.</li> </ul> <h2>Why I made this page</h2> <p>Because Buddy deserves a page that's about <strong>him</strong>, not about golden retrievers in general.</p> </body> </html>
Look at the shape. The whole page sits inside <html>
tags. Inside that there's a <head> (invisible stuff, like the title in the browser tab) and a <body> (the visible stuff). Everything you learned in the last step lives inside the body. That's it.
Type HTML on the left. Watch it appear on the right.
This is a real, working HTML editor. Every character you type updates the preview instantly. Start with the template — change the title, change the paragraphs, add your own facts. Your page is about —.
<h1> needs </h1>. That mismatch is 90% of beginner bugs.
When you like it, copy the code and save it as any-name.html on your computer. Double-click and it opens in your browser as a real webpage. No server needed.
A page that works isn't the same as a page that's good.
You can write HTML that a browser understands and still produce something nobody wants to read. Two judging rounds.
Round 1. Two pages about the same dog. Which one is better?
Round 2. Two page structures. Which is more readable?
A good HTML page is built on two things at once: correct tags (so the browser shows it right) and specific writing (so a human wants to read it). Most beginners get one of the two and stop. Builders learn to get both.
You just wrote real HTML.
A real page about the thing you care about — in the same code professional websites are built with.
What you just learned
- HTML is just labeled text. Open tag, content, close tag.
- Five tags do 90% of the work: <h1>, <h2>, <p>, <ul>/<li>, <strong>.
- Every HTML page has <html> → <head> (invisible) → <body> (visible).
- A page that works isn't the same as a page that's good — both the HTML and the writing have to be right.
- Save as
something.htmlon your computer, double-click, and it's a real webpage.
Right now your page looks plain — black text, white background, default fonts. In Module 02, you'll learn CSS: the language for making your page look like you. Colors, fonts, layout. Same HTML, completely different feel.
★ Before you call it done
Three questions. Same three. Every time.
These are the same three questions for every module in Kindling. They are how you check whether AI did the part it should and you did the part only you could. Tap each one to mark it true.
★ ★ ★