CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - My first HTML page

HTML course · Beginner · Lesson 6/68

Combine the document skeleton, meta tags and comments to write your first full HTML page.

All pieces together

Combine what you have learned so far: the <!DOCTYPE html> declaration, the <html lang="..."> root, <head> with charset, viewport and title, <body> with visible content and optional comments.

All these pieces together form your first full HTML page. Now you will write it step by step.

Comments and indentation

Adding comments to your code reminds you what each section does. Using indentation visually separates nested tags. Both habits together improve readability.

Prefer short, concise notes over long comments. Keeping the same indentation measure across the page makes your code look tidy.

Exercise Write your first HTML page — the head

Add these three tags to the head of the given skeleton: <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1"> and <title>My First Page</title>.

Show example solution 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Page</title>
  </head>
  <body>
  </body>
</html>

Exercise Add a comment to body

Add a short comment inside body; for example, note where the main content will go. Like <!-- Main content goes here -->.

Show example solution 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Page</title>
  </head>
  <body>
    <!-- Main content goes here -->
  </body>
</html>

Test yourself

  1. What does the viewport meta tag do?

    • It scales the page correctly on mobile screens
    • It sets the page's character encoding
    • It sets the tab title
    • It declares the document type
    Show answer

    It scales the page correctly on mobile screens — Correct. The viewport meta tag makes the page scale correctly on mobile screens.

  2. Close the title element

    <head>
  <meta charset="utf-8">
  <title>My First Page____
</head>
    Show answer 
    <head>
  <meta charset="utf-8">
  <title>My First Page</title>
</head>

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