<h1>Heading
The main title of a page. Use one clear <h1> to tell people what the page is about.
<h1>My game</h1>
The next step after Scratch
Welcome to HTML Studio.
Scratch uses blocks. HTML uses short labels called tags to tell a web browser what each part of a page means.
Meet the elementsYOUR FIRST WEB PAGE
<h1>Hello!</h1>
<p>I made this.</p>
<button>Click me</button>✦Your HTML toolbox
The most useful elements
Think of HTML elements as labels. They help the browser understand what it should show.
<p>Paragraph
Normal sentences and explanations. Paragraphs make longer writing easier to read.
<p>Welcome!</p>
<button>Button
A button gives somebody something to press. Give it a clear action word, like “Play” or “Start”.
<button>Play</button>
<a>Link
A link takes someone to another page. The href tells it where to go.
<a href="page.html">Next</a>
<img>Image
Shows a picture. Always add alt text so everyone can understand it.
<img src="cat.png" alt="A cat">
<ul>List
A bullet-point list. Put each list item inside its own <li> tag.
<ul><li>Idea</li></ul>
A closer look
Most tags have a beginning and an ending.
An opening tag says “start this thing”. A closing tag has a slash and says “that thing is finished”. The words in the middle are the content people see.
<p>Coding is creative!</p>
Opening tagContentClosing tag
Try it yourself
Change the code. See what happens.
Start small: change the heading, then add your own paragraph.
Live preview
Challenge: add <h2>My favourite game</h2> underneath the heading.