Chapter 01 of 76 min read
HTML5 Introduction & Document Anatomy
Understand doctype declarations, HTML tags, the head tag, and page skeleton.
What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to build the skeleton of all web pages worldwide. Unlike programming languages that perform mathematical calculations, HTML marks up content using tags so web browsers understand how to display headings, paragraphs, images, links, and forms.
- Tags: Elements surrounded by angle brackets like <p> and </p>. Most tags require opening and closing pairs.
- Attributes: Extra metadata provided in the opening tag, such as href, src, id, class, and alt.
- DOM: The Document Object Model created by the browser parsing HTML in a hierarchical tree.
The Standard HTML5 Boilerplate
Every valid HTML5 webpage begins with the <!DOCTYPE html> declaration followed by the html, head, and body nodes.
HTML Example • Chapter 01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML5 Page - WeBotApp Academy</title>
</head>
<body style="font-family: system-ui, sans-serif; padding: 24px; color: #1e293b;">
<h1 style="color: #ea580c;">Welcome to WeBotApp CodeLab!</h1>
<p>HTML5 is the universal building block of every website on the internet.</p>
<p>This is a live rendered preview in your browser.</p>
</body>
</html>💡 Click "Try in Editor" to run, edit, and experiment with this code in our live split-view environment.100% Live Preview
Key Concepts • Chapter 01
- •Always declare <!DOCTYPE html> at the very top of your file.
- •The <head> section contains metadata, titles, and styles invisible on the page.
- •The <body> section contains all user-visible headings, paragraphs, and elements.
🎯 Chapter Practice Challenge
Open the editor, change the heading text to your name, and add a second paragraph describing your learning goal.