Build Your First HTML Page: Free Practice Lesson

Give your content a structure.

HTML describes the meaning and structure of a web page. An element usually has an opening tag, some content, and a closing tag. For example, <p>Hello, world.</p> creates a paragraph. The browser interprets the tags and displays the content.

Start with the message you want someone to read. We’ll build a page with a heading, a short introduction, and a list of things you want to create.

The document, from top to bottom

<!doctype html>: Tells the browser to use modern HTML rendering rules. It is a declaration, not a visible element.
<html lang="en">: The root element wraps the document. The language attribute identifies the content language for tools such as screen readers.
<head>: Contains document information: character encoding, the browser-tab title, and viewport settings. It does not hold the main visible content.
<body>: Contains the page’s visible content. In this example, a header introduces the page, main holds its central content, and a footer closes it.

Choose tags for their meaning.

Use h1 for this page’s main heading and h2 for its sections. A paragraph belongs in p. An unordered list uses ul, with each item inside an li. Heading levels describe the content hierarchy; choose them for that hierarchy rather than their default size.

READ → CHANGE → PREVIEW

Try the starter.

Change the words between the tags, then update the preview. Notice what changes and what stays the same.

Read the starter HTML

<!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>
  <header>
    <h1>Hello, I'm a builder.</h1>
    <p>This is the beginning of my web development journey.</p>
  </header>
  <main>
    <section>
      <h2>About me</h2>
      <p>I am learning HTML so I can turn ideas into websites.</p>
    </section>
    <section>
      <h2>What I want to build</h2>
      <ul>
        <li>A personal introduction page</li>
        <li>A website for a small business</li>
        <li>A project I can share with a friend</li>
      </ul>
    </section>
  </main>
  <footer>
    <p>Built while learning with Webostics.</p>
  </footer>
</body>
</html>

Download the original starter ↓

Without JavaScript, download the starter, open it in a text editor, make your changes, and reopen the saved file in your browser.

Make it your own.

Replace the main heading with your name or a short introduction.
Write two sentences about why you want to learn web development.
Change the list to three things you would like to build.
Add a new section titled “My next step” with an h2 and a paragraph.
Change the text inside title. Download the file and open it in a browser tab to see where that title appears.

Save and open your page

Save the file as index.html, using a plain-text editor and UTF-8 encoding. If your editor asks for a file type, choose all files so it does not append .txt. Open the file with your browser. This local file is on your computer; it is not yet a public website.

If something looks wrong

If the browser shows your tags as text, check that the filename ends in .html and that you did not save a rich-text document.
If sections appear in an unexpected place, check closing tags and nesting. Close a child element before its parent.
If a change does not appear, save the file and refresh the browser. In the practice editor, choose “Update preview.”

Can you explain your page?

Try answering before opening each explanation. These are self-check questions, not a graded test.

Where does the page title belong?

Inside the title element within head. It labels the browser tab. The visible main heading is a separate h1 element inside body.

How do you add another list item?

Add another li element inside the existing ul, keeping its opening and closing tags together.

Why use main, header and footer?

They describe the roles of parts of the page. This makes the structure easier for people, assistive tools and future developers to understand.

Is your downloaded file already online?

No. Opening a local HTML file displays it on your computer. Publishing it requires putting the file on a suitable host and making it reachable.

Your finished-page checklist

The browser tab has a meaningful title.
The page has one clear main heading and logically ordered sections.
Each list item is inside the list.
The file opens correctly after you save and reopen it.
You can explain the difference between head and body.

Your first page starts here.