Step 2.2 · Home page (HTML)

Set up the head

Open the starter home page in your code editor and fill in the head: the information browsers and search engines read first.

You will work in: site/index.html
Learning outcome: Semantic HTML

Open index.html from your site folder in the VS Code Explorer panel.

The home page must be named exactly index.html, all lowercase. When someone visits yoursite.com, the server automatically sends the file named index.html. Without it, visitors see a list of your files or an error.

Read the <head>. The starter wrote it for you, but you should be able to explain every line. Every line has a job:

site/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Search engines: unique title and description for every page -->
  <title>Theme Name: Home</title>
  <meta name="description" content="One sentence (under 155 characters) that describes this page.">
  <meta name="author" content="Your Name">

  <!-- Favicon -->
  <link rel="icon" href="favicon.png" type="image/png">

  <!-- Google Fonts: paste the <link> code from fonts.google.com here -->

  <!-- Your stylesheet -->
  <link rel="stylesheet" href="css/styles.css">
</head>

Line	Job
`meta charset`	Lets the page display any character, including é, ü and curly quotes
`meta name="viewport"`	Tells phones to use their real width. Without it, your responsive CSS will not work on phones.
`title`	The browser tab and search result headline
`meta name="description"`	The summary under the title in search results
`meta name="author"`	Who wrote the page. Use your own name.
`link rel="icon"`	Your favicon
`link rel="stylesheet"`	Connects your CSS file

Change the title to Your Theme: Home, for example <title>De Stijl: Home</title>. Each page gets its own unique title.
Replace the description with your own sentence of under 155 characters.
Save. Leave the Google Fonts comment for now; you fill it in during step 3.2.

VS Code tip

Type ! and press Tab in an empty HTML file to get a complete page skeleton. Type a tag name without brackets, such as section, and press Tab to get its opening and closing tags.