HTML document setup

Create a valid HTML document with all the right starter code.

Watch the video

  1. Video or tutorial

    You can watch the video(s) or follow along with the written tutorial—or both—they convey exactly the same information.

Goal

We’re going to walk through writing some HTML code and the bits that are necessary for a valid document.

This is what it should look like when it’s done:

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

Fork & clone

Start the lesson by forking and cloning the html-document-setup repository.

Fork & clone the “html-document-setup” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

1 Set up project

Before we get started, create some files and get ready.

  1. html-document-setup
  2. index.html
  3. images This folder already exists, it was cloned from GitHub
  4. logo.svg
  1. Drag the html-document-setup folder you cloned to your code editor (likely Atom).
  2. Using your code editor, create a new file, then immediate save it as exactly index.html into the html-document-setup folder.

  1. Naming conventions

    Don’t forget to follow the naming conventions.

2 Write the HTML

In order for our HTML file to be read properly by all web browsers we need a bunch of specific elements in our code.

Here’s the HTML we need to make a basic HTML file.

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>HTML template</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>

  <!-- All the HTML content goes in here -->

  <header>
    <h1>HTML template</h1>
  </header>

  <main>
    <p>Lorem ipsum dolor sit amet.</p>
    <img src="images/logo.svg" alt="">
    <a href="https://www.wikipedia.org">Wikipedia</a>
  </main>

</body>
</html>

The code above is intentionally not copy-and-paste-able. You need to write the code by hand to learn it properly. So every single lesson will have the ability to copy-and-paste its code snippets disabled.

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

  2. Line A

    The DOCTYPE tells browsers we’re writing valid HTML. Without it browsers will render our sites like 1999.

  3. Line B

    Everything in the file is wrapped in an <html> element. This is where we specify the content language using the lang="" attribute.

  4. Line C

    The <head> is where we store extra metadata about our HTML file; stuff that isn’t rendered in the browser’s viewport.

  5. Line D

    By writing utf-8 on this line we’re allowing any language to be written in our file. Allows accented characters, non-English characters, Klingon, etc.

  6. Line E

    The <title> is the most important element—it’s what’s shown in search results and in the browser tab.

  7. Line F

    The viewport tag tells mobile browsers how to render our website—we’ll discuss this more later.

  8. Line H

    Everything goes in the <body> tag. This isn’t the body of the content it’s the body of the HTML file.

  9. Line J

    We can write notes to ourselves, called comments; they won’t be shown on the screen.

  10. Line M

    The <h1> tag is the most important piece of content on the page—every single HTML file needs one.

  11. Lines P–T

    We can write as much HTML in here as we want. The indentation is there to help us understand our code, but the browser doesn’t really care.

3 Test it in the browser

Double click the index.html file Finder or right-click in your code editor and press “Open in browser”.

You should see something that looks like this:

  1. HTML snippets

    In the future you can create the HTML boilerplate stuff with a few snippets: html5 and viewport

    Type the snippet keyword then press Tab

4 Validate the HTML

We can use an online tool, called a validator, to check our HTML for bugs like unclosed tags, missing, code, etc.

If your code isn’t doing what you expect it to do—validate it!

  1. Select all your HTML code with ⌘A
  2. Copy the code with ⌘C
  3. Go to the W3C HTML validator.
  4. Paste the code into the “Validate by Direct Input” text box with ⌘V
  5. Press “Check”.
  6. See your errors, correct them, and validate again.

You want to get the green bar—green is good.

Drop it into Markbot & submit

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

  1. Submit

    Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.