HTML · Quick Reference

Lesson 4 — HTML Document Structure Cheat Sheet

HTML

In one line: <!DOCTYPE html> is the very first line of every HTML5 document. It's not an HTML tag — it's an instruction to the browser. It says: "Render this page in HTML5 standards mo...

Key Ideas

1The DOCTYPE Declaration. <!DOCTYPE html> is the very first line of every HTML5 document. It's not an HTML tag — it's an instruction to the browser. It says: "Render this page in HTML5 st...

2The <html> Root Element. The <html> element wraps the entire document. Every other element in the page is a descendant of this root. It has one critical attribute you should always include:

3The <head> — Invisible Metadata. The <head> contains information about the page — none of it is rendered directly on screen. Think of it as the document's control panel.

4The <body> — Visible Content. The <body> contains everything the user sees and interacts with. Every visible element on your page — text, images, buttons, forms, navigation — lives inside the...

5The Complete Document Skeleton. Here is the full template you should start every HTML project with. Every element here has a purpose — don't remove any of them:

Code Examples

<!DOCTYPE html>  <!-- Always first, no exceptions -->

<html lang="en">
  <!-- All head and body content goes here -->
</html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page Title — My Site Name</title>
  <meta name="description" content="A 155-char description of this pa...