HTML Basics

Learn the structure of an HTML document: DOCTYPE, head/body, and the most common tags. Build a clean foundation before styling or scripting.

HTMLDOCTYPEhead/bodysemantic

Duration

⏱ About 1.5 hours

Level

📊 Beginner

Prerequisite

🎯 Lessons 1–2

OUTCOME

A valid HTML5 page with proper structure and core tags

What you'll learn

1Explain the role of DOCTYPE, head, and body
2Write proper headings (h1–h6) and paragraphs
3Use lists, links, and images correctly
4Validate your HTML with the W3C validator

1. The Skeleton of an HTML Document

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>
<body>
  <h1>Hello</h1>
  <p>Welcome to my site.</p>
</body>
</html>

<!DOCTYPE html> — declares HTML5
<html lang="en"> — the root element (lang helps screen readers and SEO)
<head> — metadata (not visible)
<body> — what users actually see

2. Headings and Paragraphs

html

<h1>Main title (only one per page)</h1>
<h2>Section</h2>
<h3>Sub-section</h3>
<p>A paragraph of text. Keep one idea per paragraph.</p>

💡

Use heading levels for structure, not for size. Style with CSS, semantics with HTML.

3. Lists, Links, and Images

html

<ul>
  <li>Unordered item</li>
  <li>Another item</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

<a href="https://example.com" target="_blank" rel="noopener">External link</a>
<img src="cat.jpg" alt="A photo of my cat" width="240">

⚠️

Always provide alt text on <img>. It is required for accessibility and shown when the image fails to load.

4. Validate Your HTML

Paste your code into https://validator.w3.org
Fix errors before styling — invalid HTML produces inconsistent browser behavior
Run a validator pass at the end of every project

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗