Python The Sacred HTML5 Skeleton
Every production web page begins with the exact same boilerplate blueprint. It has two main zones: the <head> (the invisible control brain) and the <body> (everything visible to the human eye).
"Think of a human. The <head> holds your thoughts, language preferences, and name (title). The <body> is your physical visible torso and limbs that people can actually see and interact with."
Deep Dive: How It Works
<!DOCTYPE html>: The very first line. It tells modern browsers: "Use modern standard HTML5 parsing rules, please don't render like it is 1995."
<html lang="en">: The root wrapper that encloses every single byte of your webpage.
<head>: Contains page metadata, character encoding (<meta charset="UTF-8">), and the tab title (<title>). Nothing inside <head> is rendered on the page canvas itself.
<body>: Contains all visible headers, paragraphs, buttons, images, and content.
Syntax Blueprint
<!DOCTYPE html> <html> <head><title>Tab Title</title></head> <body><h1>Visible Canvas</h1></body> </html>
Standard 4-tier document architecture.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Putting visible text inside the <head>Why it happens: Confusing the invisible header metadata with page headings <h1>.
How to fix: Put visible text inside <body><h1>...</h1></body> and metadata inside <head>.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Assemble a mini HTML document
- Write <!DOCTYPE html>
- Create an <html> tag wrapping a <body> tag with an <h1> containing "My Website".
Finished reading and practicing?
Mark this lesson as completed to update your course progress.