Build your first web page

What you need

Nothing to buy or install beyond what most computers already have:

• A browser such as Chrome, Firefox, Edge or Safari.
• A text editor. Visual Studio Code is free and popular. Notepad on Windows or TextEdit on a Mac also work (in TextEdit, choose Format → Make Plain Text first).

Word processors such as Microsoft Word are not suitable: they save hidden formatting that the browser cannot read as HTML.

Step 1: make a folder

Create a folder somewhere easy to find, for example my-first-site on your desktop. Keeping each website in its own folder makes things simpler later, when you add images and stylesheets next to your page.

Step 2: create index.html

Open your editor, create a new file and save it inside the folder as index.html. The name matters for two reasons: the .html ending tells your computer it is a web page, and index is the name web servers look for by default when someone visits a folder.

Now type this, line by line. Typing it yourself, rather than pasting, helps you remember the shape.

<!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>
    <h1>Hello, I am learning HTML</h1>
    <p>This page was written by hand, one tag at a time.</p>
  </body>
</html>

Step 3: open it in the browser

Save the file, then double-click it in your folder. It opens in your default browser. Look at the tab: it says My first page. The page itself shows your heading and paragraph.

Change the paragraph, save, and refresh the browser (F5 or Ctrl+R, Cmd+R on a Mac). Edit, save, refresh: you will repeat this loop thousands of times, so it is worth getting comfortable with it now.

Every line explained

<!doctype html> tells the browser this is a modern HTML document. Without it, browsers switch to an old compatibility mode that copies the bugs of browsers from the late 1990s. It is not a tag that needs closing; it is simply a declaration at the very top.

<html lang="en"> wraps the whole page. The lang attribute says the page is in English, which helps screen readers pronounce words properly and helps translation tools. Use hi for Hindi, for example.

<head> holds information about the page that visitors do not see in the page body:

• <meta charset="utf-8"> says which character encoding the file uses. UTF-8 covers practically every language and emoji. Put it first in the head so the browser knows how to read everything after it.
• <meta name="viewport" ...> makes the page display at the width of a phone screen instead of a zoomed-out desktop layout. Leave it out and your page looks tiny on mobile.
• <title> is the text on the browser tab, in bookmarks and, usually, the headline of your page in search results. Every page should have a short, specific title.

<body> holds everything visitors actually see: headings, paragraphs, images, links and so on.

Indentation is for humans

The spaces at the start of lines do not change how the page looks. They show which elements sit inside which, so you and anyone reading your code can follow the structure at a glance. Most editors indent automatically. Pick two or four spaces and be consistent.

Common mistakes

• Saving as index.html.txt. Windows hides file endings by default, so a file can look like index.html while really being a text file. In File Explorer, turn on View → File name extensions to check.
• Putting visible content in the head. Text inside <head> does not appear on the page. If something is missing, check which section it is in.
• Forgetting to save before refreshing. If nothing changes, this is almost always the reason.
• Skipping the title. A page without a title shows its file name on the tab and gives search engines nothing useful.

Exercise

Make a second file in the same folder called about.html. Give it the full skeleton, the title About me, a main heading with your name and two paragraphs: one about what you do, one about why you are learning to code. Open it in the browser and check that the tab shows the right title.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>About me</title>
  </head>
  <body>
    <h1>Priya Verma</h1>
    <p>I work in customer support for a software company.</p>
    <p>I am learning to code so I can understand the products I support and, one day, help build them.</p>
  </body>
</html>