</> HTML · BEGINNER PATH

Give your ideas a structure.

HTML describes the content of a web page. In this path, you will create a document, organize its words, and connect it to useful resources.

Three lessons · about 18 minutes0 of 3 complete

LESSON 1 · THE DOCUMENT

What makes a web page?

A browser reads HTML from top to bottom. The doctype tells it to use modern HTML rules. The head holds page information. The body holds the content people see.

<!doctype html>
<html lang="en">
  <head>
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Notice: Most elements have an opening tag and a closing tag. The closing tag uses a slash, as in </body>.

Quick check: where does visible page content go?

A small step counts.Try HTML in the playground ↗

LESSON 2 · MEANINGFUL CONTENT

Give each piece of text a job.

Headings create an outline for the page. Start with one main h1, then use h2 for the next level. A paragraph belongs in p. Pick tags for meaning, not just for their default size.

<main>
  <h1>Weekend workshop</h1>
  <section>
    <h2>What we will make</h2>
    <p>We will build a tiny paper garden.</p>
  </section>
</main>

Try it: Write a page outline for a favorite hobby. Give it a main heading, two section headings, and a sentence under each one.

Quick check: which element makes a second-level heading?

A small step counts.

LESSON 3 · LINKS & IMAGES

Connect your page to the world.

An anchor makes a link. Its href says where to go. An image uses src for the file and alt for a useful text description. Good alt text helps when an image cannot load and when someone uses a screen reader.

<a href="https://example.com">
  Visit the project page
</a>

<img src="garden.jpg"
     alt="Yellow flowers beside a garden path">

Alt text tip: Describe what matters in context. If an image is purely decorative, use empty alt text: alt="".

Quick check: which attribute describes an image?

A small step counts.Next path: add some style ↗

← All courses Continue to CSS →