CodeBlanks Logo Icon CodeBlanks
Login Register

Challenge - Document skeleton

HTML course · Beginner · Lesson 64/68

Test the basics by writing a full HTML document skeleton from scratch.

Recall the document skeleton

An HTML document begins with a fixed skeleton the browser recognizes. <!DOCTYPE html> declares the document type; <html lang="en"> is the root element; <head> carries metadata and <body> carries the visible content.

The metadata includes charset for the character set, viewport for the mobile scale, and <title> for the tab title. Without these the page still opens but does not behave correctly; building the full skeleton should become a habit.

Exercise Write the full document skeleton

Write an HTML document from scratch. Start with <!DOCTYPE html>; use <html lang="en"> as the root. In head add a meta with charset="utf-8", a second meta named viewport, and <title>My Page</title>. In body put an <h1> and a <p>.

Show example solution 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
<p>My first page.</p>
</body>
</html>

Test yourself

  1. Complete the viewport meta tag

    <meta charset="utf-8">
<meta name="____" content="width=device-width, initial-scale=1.0">
    Show answer 
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

  2. Match each tag to its role

    <!DOCTYPE html>
    Document type declaration
    <html>
    Document root
    <head>
    Metadata
    <body>
    Visible content
    <title>
    Tab title

  3. Where does the <title> element go in an HTML document?

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <body></body>
</html>
    • Inside body
    • Inside head
    • Outside the html element
    • Before the doctype declaration
    Show answer

    Inside head — Correct. <title> lives inside head; it sets the text shown in the tab.

All lessons in Beginner

1 Document basics

  1. What is HTML?
  2. The document skeleton
  3. Head and meta tags
  4. Title and language
  5. Comments and readability
  6. Summary - My first HTML page

2 Text content

  1. Headings: h1–h6
  2. Paragraphs
  3. Line break and horizontal rule
  4. Emphasis and important text
  5. Quotations and sources
  6. Summary - Article page

3 Project: About me page

  1. Project: About me page
  2. Skeleton and title
  3. Introductory text
  4. Emphasis and separation
  5. Project final - About me

4 Links and navigation

  1. Anchor links
  2. Absolute and relative URLs
  3. In-page links
  4. Link targets
  5. Email and phone links
  6. Summary - Navigation menu

5 Lists

  1. Unordered lists
  2. Ordered lists
  3. Description lists
  4. Nested lists
  5. Links in list items
  6. Summary - Table of contents

6 Project: Business card page

  1. Project: Business card page
  2. Name and title
  3. Contact list
  4. Skills and links
  5. Project final - Business card

7 Images and media

  1. Adding images
  2. Image dimensions
  3. Figure and figcaption
  4. Audio and video
  5. Alternative sources
  6. Summary - Media gallery

8 Intro to tables

  1. Table skeleton
  2. Header cells
  3. Table sections
  4. Caption and title
  5. Cell spanning
  6. Summary - Class schedule table

9 Project: Recipe page

  1. Project: Recipe page
  2. Recipe title and summary
  3. Ingredient list
  4. Steps and baking table
  5. Project final - Recipe page

10 Intro to forms

  1. Form skeleton
  2. Labelled input
  3. Input types
  4. Textarea and button
  5. Selection fields
  6. Summary - Feedback form

11 Intro to semantic tags

  1. Why semantic tags matter
  2. Header and footer
  3. Nav and main
  4. Article and section
  5. Aside and address
  6. Summary - Semantic blog skeleton

12 Beginner final

  1. Challenge - Document skeleton
  2. Challenge - Text and links
  3. Challenge - Lists and tables
  4. Challenge - Form and semantic structure
  5. Challenge - Beginner capstone