HTML - Basic Page Structure
Overview
Estimated time: 25–35 minutes
The foundation of every web page is the same: a doctype, the root <html> element, a <head> for metadata, and a <body> for visible content. Master these early and everything else becomes easier.
Learning Objectives
- Write a valid HTML5 document with correct language and viewport.
- Differentiate metadata in
<head>from content in<body>. - Understand why the doctype exists.
Prerequisites
Minimal valid document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
</head>
<body>
<h1>Page heading</h1>
<p>Your content goes here.</p>
</body>
</html>
Try it
What goes in head vs body
- Head: title, meta (charset, viewport, description), links to icons and stylesheets, base URL.
- Body: all visible content: headings, paragraphs, images, links, lists, tables, forms, etc.
Doctype and standards mode
<!DOCTYPE html> tells the browser to use standards mode. Without it, some browsers may enter quirks mode and render inconsistently.
Multiple examples
<!-- Add a description for SEO -->
<meta name="description" content="My awesome page">
<!-- Add a favicon -->
<link rel="icon" href="/favicon.ico">
<!-- Basic body structure -->
<header>Brand</header>
<main>
<article>
<h1>Title</h1>
<p>Intro paragraph.</p>
</article>
</main>
<footer>© 2025</footer>
Common Pitfalls
- Missing
langon<html>(hurts accessibility/SEO). - Omitting
meta viewport(poor mobile rendering). - Putting visible content in
<head>(it won’t render).
Checks for Understanding
- What does the doctype do?
- What belongs in
<head>vs<body>?
Show answers
- It triggers standards mode for consistent rendering across browsers.
- Metadata goes in
<head>; visible content goes in<body>.
Exercises
- Create a page with a proper head (charset, viewport, title, description) and a body with a header, main, and footer.
- Add a favicon and verify it appears in your browser tab.