Your First HTML Page: The Basic HTML Document Template

In the previous lesson you displayed a single heading. Real pages wrap their content in a standard template that tells the browser which version of HTML you use, which language the page is in, and how to handle text and small screens.

The complete template#

<!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 as index.html and open it in your browser. Here is the result:

<!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>

The title "My First Page" does not appear on the page itself. When you open your own file, look at the browser tab: that is where the <title> is shown.

Line by line#

You will look at each part in more detail in Document Structure.

Indentation#

Notice how elements inside other elements are indented. Browsers ignore the extra spaces, but indentation makes it easy to see what is inside what. Most editors indent automatically; in VS Code, Format Document (Shift+Alt+F on Windows) tidies a whole file.

Common mistakes#

Practice#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Hobbies</title>
  </head>
  <body>
    <h1>Things I Enjoy</h1>
    <p>I play badminton every Sunday morning with my friends.</p>
    <p>I also like cooking, especially trying new curry recipes.</p>
  </body>
</html>

Key takeaway#