Every web page is built from small blocks called tags. Today you'll learn the most useful ones, and add headings, lists and a picture to your site.
About 40 minutes. You can stop and come back. Your answers are saved in this browser.
Last time you made your first page. Let's see what you remember!
HTML is made of tags. A tag tells the browser what each piece of the page is: "this is a heading", "this is a list", "this is a picture". Most tags come in pairs: an opening tag and a closing tag with a slash. Whatever sits between them is the content.
<p>I love skateboarding.</p>| Tag | What it makes |
|---|---|
<h1> to <h3> | Headings. h1 is the biggest. Use one h1 per page, then h2 for sections. |
<p> | A paragraph of text. |
<ul> + <li> | A bullet list. ul holds the list, and each li is one item. |
<ol> | A numbered list (with li items too). |
<strong> | Bold, important words. |
<img> | A picture. It has no closing tag! |
<section> | A box that groups one part of the page together. |
<h1>Skate Zone</h1>
<h2>My favorite tricks</h2>
<p>These are the tricks I'm learning right now.</p>
<ul>
<li>Ollie</li>
<li>Kickflip</li>
<li>Manual</li>
</ul>
<p>The <strong>ollie</strong> is where every trick starts.</p>Notice the list: the ul wraps around all the li items, like a box holding three cards.
<img src="my-board.png" alt="My skateboard with green wheels and a lightning bolt sticker">src is the picture's filename. The picture file must be saved in the same folder as your page, with exactly the same name.
alt is a short description of the picture. Screen readers read it out for people who can't see the picture, and the browser shows it if the picture can't load. Describe what's actually in it!
Picture rules for your site: use your own drawings or photos of things, not people. Don't copy pictures from other websites, because they belong to someone else. And keep the filename simple: lowercase, no spaces, like my-board.png.
Asking "line by line" and then a follow-up question (from Talk Back!) is the fastest way to really understand your code.
Which tag would you use to make each part of the page?
Add a "favorite things" section to this page. Type the tags yourself, and the goals tick off as you go. Stuck? Look back at Example 1.
The playground only runs inside this page. It can't open other websites or change anything on your computer. Your code is saved in this browser, on this device.
The picture won't show in the playground, because there's no picture file here. That's fine! You'll see your alt text instead. That's exactly what alt text is for.
Time to use your own chatbot. Missions get harder as you go. Bronze is the one to do today. Silver and Gold are extra challenges for when you want more.
Add a new section to your real website, typed by you.
index.html in your text editor.h2 heading, a paragraph and a list of at least 3 things, all typed by hand.Add your first picture.
my-website folder with a simple name.<img> tag with the exact filename and good alt text.Understand every line.
Your notes are saved right in this browser, on this device. They're never sent anywhere.
Add today's page to your Build Log.
Your Build Log is saved right in this browser, on this device. It's never sent anywhere.
h1-h3), paragraphs (p), lists (ul/ol + li) and section are the main building blocks.<img src="..." alt="...">. The file must be in the same folder, and alt text describes it.10 questions, picked at random from a bigger question bank. If you take it again, you'll probably see a different mix. Let's go!
Give your site colors, fonts and style.