freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 2.2 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

DOCTYPE, html, head, and body explained

Your roadmap for this lesson

  • What <!DOCTYPE html> does and why it is first
  • The <html> root element and the lang attribute
  • What belongs inside <head>
  • What belongs inside <body>

Short answer

<!DOCTYPE html> tells the browser to use modern standards mode. <html> is the root element that wraps everything, and its lang attribute names the page language. <head> holds metadata the browser and search engines read. <body> holds the content people see.

<!DOCTYPE html>

The doctype declaration is always the very first line. It is not a tag. It is an instruction that says: this is a modern HTML document.

Without it, browsers fall back to quirks mode, an old way of rendering built for websites from the 1990s. Layouts can break in strange ways. With it, browsers use standards mode.

<html lang=“en”>

The <html> element is the root element. Every other element lives inside it.

The lang attribute tells browsers, screen readers, and translation tools which language the page uses.

Page languagelang value
Englishen
English (Philippines)en-PH
Filipinofil
Tagalogtl

A screen reader uses lang to pick the right pronunciation. Google Translate uses it to decide when to offer a translation.

The head holds information about the document:

  • <meta charset="utf-8">: the character encoding, so letters like ñ and ₱ display correctly.
  • <meta name="viewport">: makes the page fit phone screens.
  • <title>: the text in the browser tab and Google results.
  • <link>: connects CSS files and favicons.
  • <script>: loads JavaScript.

<body>

Everything a visitor can see or click goes in the body: headings, paragraphs, images, links, tables, forms, and videos. You will spend most of this course inside the body.

Try it: set the language and encoding

This page has a missing charset and the wrong language. Add a meta charset line in the head and change lang to fil, since the text is Filipino.

Live preview

Quick quiz

1. What happens without a doctype?
2. Which element is the root?
3. Which tag makes ñ and ₱ display correctly?
4. What lang value fits a Filipino page?

Common mistakes

  • Putting the doctype second. It must be the first line, before any spaces or comments ideally.
  • Skipping lang. Screen readers may read your page with the wrong accent.
  • Placing charset late. Put the charset meta tag first inside head so the browser reads it early.

Your action

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

Key terms

Doctype declaration
The first line, <!DOCTYPE html>, that turns on standards mode.
Quirks mode
An old rendering mode browsers use when the doctype is missing.
Root element
The <html> element that contains all others.
lang attribute
Declares the language of the page or an element.
Character encoding
How text is stored as bytes. UTF-8 is the standard.
Metadata
Data about the page, stored in the head.

Questions beginners ask

Is DOCTYPE case sensitive?

No. <!doctype html> works too. Many people write it in uppercase by habit.

Can one page mix languages?

Yes. Set the main lang on <html>, then add lang="fil" on any paragraph in Filipino.

Why UTF-8?

UTF-8 covers nearly every language and symbol, including the peso sign. It is the web standard.

Related lessons

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