Your First Web Page

Create a file named index.html and type this in:

<!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, world!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Save it and open it in your browser. You'll see "Hello, world!" as a big bold heading, the sentence below it in normal text, and "My First Page" in the browser tab.

Line by line:

• <!DOCTYPE html> tells the browser this is a modern HTML document. It must be the very first line.
• <html lang="en"> wraps the whole page and says it's in English.
• <head> holds information about the page: the character encoding, viewport settings for phones, and the <title> shown in the tab.
• <body> holds everything that appears on the page.
• <h1> is the main heading; <p> is a paragraph.

Indentation is for humans — the browser ignores it — but it makes the nesting easy to see.

Add more content

Edit the body, save, and reload:

<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<h2>Things I want to learn</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
<p>Made with <a href="https://developer.mozilla.org/">help from MDN</a>.</p>

The page now has a smaller second-level heading, a bulleted list, and a paragraph containing a link.

Common mistakes

• Saving as index.html.txt — Windows may hide the real extension. Turn on "File name extensions" in File Explorer.
• Forgetting to save before reloading.
• Typing curly "smart quotes" (“ ”) from a word processor instead of straight quotes " around attribute values.

Practice

Make a page titled "About Me" with a main heading containing your name and two paragraphs: one about where you live, one about a hobby.

<!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>Ada Lovelace</h1>
    <p>I live in London.</p>
    <p>In my free time I write notes about calculating engines.</p>
  </body>
</html>