Write the head

1. Add this to index.html. Type it or copy it, then read the table in the next step line by line. You wrote most of this in the warm-up; what’s new are the comments and the <link> to your style sheet.

   index.htmlCopy

   <!doctype html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
   
     <!-- Search engines: the page title and a one-sentence summary -->
     <title>Happy Tails: A Friendly Guide to Dogs</title>
     <meta name="description" content="Meet three popular dog breeds, learn what every dog needs, and find a dog to adopt.">
     <meta name="author" content="Your Name">
   
     <!-- My stylesheet -->
     <link rel="stylesheet" href="css/styles.css">
   </head>
   <body>
   
   </body>
   </html>

2. Read what each line does:

   Code	What it does
   <!doctype html>	Tells the browser this is a modern HTML page. Always the first line.
   <html lang="en">	Wraps the entire page. lang="en" tells screen readers to speak English.
   <head>	Information about the page. Nothing in the head appears on the page itself.
   <meta charset="UTF-8">	Lets the page show any character, such as é, ñ or curly quotes.
   <meta name="viewport" …>	Tells phones to use their real screen width. Without it, your responsive design will not work on phones.
   <title>	The name in the browser tab and the headline in search results.
   <meta name="description" …>	The short summary under your title in search results. Keep it under 155 characters.
   <meta name="author" …>	Who wrote the page. Use your own name.
   <link rel="stylesheet" …>	Connects your CSS file. That file doesn't exist yet; you create it on Day 2.
   <body>	Everything visitors see goes between <body> and </body>.

3. Save and preview. Preview the page the same way you did in the warm-up:

   • Integrated Browser: right-click index.html in Explorer and choose Open with Integrated Browser.
   • External browser: right-click index.html, choose Reveal in Finder (Mac) or Reveal in File Explorer (Windows), then double-click the file.

   The page is blank, but the tab shows your title. Keep the preview open for the rest of the project, and refresh it after you save.

VS Code tip

VS Code closes tags for you: type <title> and it adds </title>. After this project, you can type ! and press Tab in an empty HTML file to get a starter skeleton.

© Created by Sara Rosenstock, Marietta College Graphic Design.