freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 2.1 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

The basic HTML document

Covered here

  • The HTML boilerplate, line by line
  • Why every page needs the same skeleton
  • Indentation for readable code
  • HTML comments for notes

Short answer

Every HTML page uses the same skeleton, often called the boilerplate or starter template. It has a doctype, an <html> root element, a <head> for information about the page, and a <body> for what visitors see. Copy it once, and you will reuse it for every page you build.

The HTML boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page title</title>
</head>
<body>
  <h1>Page heading</h1>
  <p>Page content goes here.</p>
</body>
</html>

Only about ten lines, but each one has a job. You will study each part in Lesson 2.2.

Head vs body

PartHoldsVisible on the page?
<head>Title, character encoding, metadata, links to CSSNo
<body>Headings, text, images, links, formsYes

A simple way to remember: the head is the page’s brain, full of information. The body is the part people see.

Indentation keeps code readable

Browsers ignore extra spaces and line breaks in your code. Indentation is for humans. Indent each child element two spaces inside its parent so you can see the tree at a glance.

<body>
  <ul>
    <li>Pili nuts</li>
    <li>Abaca bags</li>
  </ul>
</body>

Comments are notes for you

Text between <!-- and --> is a comment. The browser hides it. Use comments to leave notes for yourself or your team.

<!-- Contact section starts here -->

Comments are still visible in View page source, so never put passwords or private notes in them.

Try it: fill the skeleton

The skeleton is empty. Put a heading and two paragraphs inside the body. Then add a comment that says where the content starts.

Live preview

Quick quiz

1. Which part of the document holds visible content?
2. What does indentation do for the browser?
3. How do you write an HTML comment?
4. Can visitors see comments in page source?

Common mistakes

  • Putting content in the head. Headings and paragraphs belong in the body.
  • Two body elements. A page has exactly one head and one body.
  • Secrets in comments. Anyone can read comments in the source code.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Boilerplate
A standard starter template reused on every page.
<head>
The container for information about the page.
<body>
The container for everything visitors see.
Indentation
Spaces at the start of a line that show nesting.
HTML comment
A hidden note written between <!-- and -->.

Questions beginners ask

Do I have to type the boilerplate every time?

No. Save it as a template, or type ! and Tab in VS Code.

What if I forget the head?

Browsers will add one, but your page may lose its title and character encoding. Always include it.

Tabs or spaces?

Either works. Two spaces is the most common style for HTML.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.