0%
Illustration of small workers assembling the skeleton of a web page with scaffolding and a blueprint

Module 1: First Page · Lesson 6 of 6

Build Your First HTML Page: Hello World Project

About 15 minProject

By HTML6 (opens in a new tab) · Updated · How we write and check content

All lessons in Module 1
  1. What HTML Is
  2. Tags and Elements
  3. Attributes
  4. The Page Skeleton
  5. Head and Body
  6. Project: Hello World Page

Module overview

Goal: Build a whole page from an empty file.

Learn

Now you build a complete page from an empty file. You'll need everything from this module:

Programmers have a tradition: the first thing you make in any new language says "Hello, World (opens in a new tab)". Yours will do the same and then introduce you. Type it out instead of copying. Your fingers learn the shape of a page faster than your eyes do.

The short version

  • Start with the bare skeleton (doctype, html, head, body). Fill in the head after that, and the body last.
  • The head holds the charset and the title. Every visible word goes in the body.
  • Use one <h1> as the main heading and paragraphs for the rest of your text.
  • Quote every attribute value, especially one that contains spaces.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World from Ana</title>
  </head>
  <body>
    <h1 title="That's me!">Hello World, I'm Ana</h1>
    <p>I grow tomatoes on my balcony.</p>
  </body>
</html>

Your task

Build a page that introduces you:

  1. Start with <!DOCTYPE html> and an <html> tag with a lang attribute.
  2. In the head: <meta charset="utf-8"> and a title that contains Hello World.
  3. In the body: exactly one <h1> that greets the visitor.
  4. Give the heading a title attribute with a fun tooltip.
  5. At least two paragraphs: one about you, one about what you want to build with HTML.
  6. Keep all visible content in the body, none in the head.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Common mistakes

Wrong

<h1>Hello World</h1>
<h1>I'm Sam and I collect maps.</h1>

Right

<h1>Hello World</h1>
<p>I'm Sam and I collect maps.</p>

A heading labels a section of the page. Ordinary sentences go in paragraphs, whatever size you want them.

Wrong

<title><strong>Hello</strong> World</title>

Right

<title>Hello World from Sam</title>

The title can only contain plain text, so any tags inside it appear on the tab as literal characters.

Go deeper

Your page is small, but it is a real web page. Put it on a server and anyone in the world can open it. Before you do, run it through the W3C Markup Validation Service (opens in a new tab). Paste your code in the Validate by Direct Input tab and it lists anything that breaks the rules, with the line number. A clean result means every browser will read your page the way you intended.

Pick the file name with care, too. Web servers look for index.html when a visitor asks for a folder, a convention called the directory index (opens in a new tab), so it is the standard name for a home page. Use lowercase letters and hyphens in file names, never spaces: about-me.html, not About Me.html.

If you open the page on a phone, the text may look tiny. That is because phones assume an old desktop layout unless the head contains a viewport meta tag. You will add it when you start styling pages. Until then, HTML Preview (opens in a new tab) lets you paste your code and see it at phone-sized viewports without leaving your desk.

Keep every project in its own folder from day one. When images and stylesheets arrive later, everything stays together and your links keep working.

Frequently asked questions

How do I create an HTML file and open it in a browser?

Open a plain text editor, type your HTML and save the file as index.html. If the editor asks about encoding, choose UTF-8. Then double-click the file or drag it into a browser window. After each change, save and press F5 (Cmd+R on a Mac) to reload the page and see the result.

Why is the first program called Hello World?

The tradition was made famous by the 1978 book The C Programming Language by Brian Kernighan and Dennis Ritchie, whose first example printed "hello, world". Since then, almost every tutorial starts the same way. It proves your tools work end to end before you write anything complicated.

How do I put my HTML page online?

Upload your files to a web host, a computer that serves pages to the internet. Free options such as GitHub Pages, Netlify and Cloudflare Pages let you publish a static HTML site in minutes. Name your main page index.html. Servers send that file automatically when someone visits a folder or your domain. The guide How to Make a Website with HTML walks through publishing step by step.

Tags in this lesson

<h1>The top-level heading, naming what the page is about.<html>The root element. Every page's head and body sit inside it.<meta>Page metadata such as the charset, viewport and description.<title>Names the page in the browser tab, in bookmarks and in search results.

Read next

What is HTML, and what does a browser do with it?

HTML in plain English: what the letters stand for, how a browser turns tags into a page, what elements and attributes are, and a first page you can write in ten minutes.

How long does it take to learn HTML? About six weeks, and here is the plan

How long does it take to learn HTML? One hour to a first page, two weeks for the basics, six weeks to be comfortable. A week-by-week plan with free lessons and projects.