The boilerplate you can copy forever

Every HTML page is a text file with this skeleton. Browsers are forgiving if you forget bits, but write it anyway.

<!DOCTYPE html>         <!-- "hey browser, this is modern HTML" -->
<html lang="en">
<head>                  <!-- meta, not visible -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My page</title>
</head>
<body>                  <!-- everything visible goes here -->
  <h1>Hello, world</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Why it works: <!DOCTYPE html> prevents the browser from thinking it's HTML from the 90's! <head> is metadata; <body> is what you see. The viewport meta makes mobile not zoomed-out (see more in Module 12).

      <h1>Hello, world</h1>

      <p>This is a paragraph.</p>

Hello, world

This is a paragraph.

The top is the code,

The bottom is how it's rendered

Tags, attributes, nesting, comments

    <tag attribute="value">content</tag> — normal tag

    <br> or <br /> — void (no closing)

    <!-- comment, not rendered -->

<!-- nesting: tags inside tags, like boxes in boxes -->
<p>I am <strong>bold</strong> and <em>italic</em>.</p>

<!-- WRONG: overlapping tags -->
<p><strong>oops</p></strong>  <!-- don't do this -->

Gotcha: Not all tags need closing. Void tags: <br>, <hr>, <img>, <input>, <meta>. Don't write <br></br>.

The six headings + friends

h1: Page title

h2: Section

h3: Subsection

h6: Tiny

p: paragraph. strong: bold em: italic
br: line break

hr (as shown above) is a horizontal line.

<h1>My Recipe</h1>
<h2>Ingredients</h2>
<p>Flour, <strong>500g</strong>. Don't skip it.</p>
<h2>Method</h2>
<p>Mix <em>gently</em>.<br>Rest 10 min.</p>
<hr>
<p>Serves 4.</p>

Gotcha: Don't pick <h3> because it "looks smaller". Headings are hierarchy, not font size. Skipping from h1 to h4 confuses screen readers. You can style size with CSS later.

Live demo: headings hierarchy

Below uses only tags from this module. no CSS.

Ada, the Cat & Part-time Gremlin

Loves boxes, hates closed doors. Based in California.

About

I am a tabby with strong opinions about vacuum cleaners and a deep love for sunbeams.

Fun facts

Knocks cups off tables.
Expert in hr. see below.

Last updated: today

Exercise: One-page "About Me":

Create index.html with only tags from this module. It must have:

One <h1> (your name / title)
At least two <h2> sections
Three <p>, one with <strong> and one with <em>
One <br> and one <hr>

Open it in browser. View source. Does the outline make sense if you read only headings?

Starter template

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>About Me</title></head>
<body>
  <h1>Your Name</h1>
  <h2>About</h2>
  <p>...</p>
</body></html>

Prev0: How The Web Works Next2: Links, Images & Paths