The HTML Skeleton Lesson 1 of 7

Every web page starts with the same bones. Learn the required document structure that browsers expect.

HTML 101   DESN 368
← All Lessons Next →

Exercise: Your First Document

  • First: make sure you’re signed into CodePen, then name your pen HTML 101 — The HTML Skeleton
  • Write a complete HTML document boilerplate using the infromation from the lesson below — doctype, html, head, body, title, one heading, one paragraph
  • Give the page a specific, meaningful title — not “My Page”
  • Save the pen — you’ll submit the link to Canvas when all 7 lessons are done

What Every Page Has in Common

  • Open any website’s source code — news, portfolio, banking app — same structure at the top
  • Not the same content, not the same design — the same skeleton
  • Browsers expect this structure to be present and in the right order

Also called: Boilerplate

  • Boilerplate = standard code you copy as a starting point for every new project, with little or no modification
  • The term comes from printing — boilerplate plates were reused blocks of standard text
  • In web dev, “HTML boilerplate” means this exact skeleton — you’ll type or paste it at the start of every new page
  • Many editors (VS Code, CodePen) generate it automatically when you type ! and hit Tab

The Required Structure

Every line, annotated:

<!DOCTYPE html>
Tells the browser: this is HTML5
<html lang="en">
lang attribute sets screen reader language
<head>
Metadata container — invisible to users
<meta charset="UTF-8">
Character encoding: supports every language
<meta name="viewport" …>
Prevents mobile zoom-out on phones
<title>My First Page</title>
Browser tab · bookmarks · search results
</head>
structural close
<body> … </body>
Everything visible in the browser window
</html>
structural close

Quick Reference

ElementPurposeRequiredMDN
<!DOCTYPE>Declares HTML5 — must be first, or browsers enter quirks modeYesMDN →
<html>Root element; lang attribute enables correct screen reader pronunciationYesMDN →
<head>Container for metadata — invisible to users, read by browsers and search enginesYesMDN →
<meta>Charset (UTF-8 supports every language) and viewport (prevents mobile zoom-out)YesMDN →
<title>Page name in browser tab, bookmarks, and search results — read aloud by screen readers firstYesMDN →
<body>Everything visible in the browser — headings, paragraphs, images, formsYesMDN →

A More Complete Example

Here’s the skeleton with real content added — notice the hierarchy stays intact:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ramen Recipe — Cooking Lab</title>
  </head>
  <body>
    <h1>Classic Shoyu Ramen</h1>
    <p>A rich, clear broth with soy sauce and toppings.</p>

    <h2>Ingredients</h2>
    <ul>
      <li>4 cups chicken stock</li>
      <li>2 tbsp soy sauce</li>
      <li>2 portions ramen noodles</li>
    </ul>
  </body>
</html>

Designer Note

  • The skeleton is invisible to users — but it’s critical infrastructure
  • Missing doctype or charset breaks silently — correct in one browser, garbled in another
  • Getting this right is the professional baseline, not optional
← All Lessons Next →