(Progress persistence is disabled until Phase 9)
HTML Document Structure
Learn the core structure required for every valid HTML webpage.
Learning Objectives
- Understand the skeleton of an HTML document
- Learn how the html, head, and body tags nest together
- Create a basic, valid HTML webpage
The HTML Skeleton
Every valid HTML webpage requires a specific structure, often called the “skeleton” or “boilerplate.” This structure tells the browser exactly how to read and render the page. Understanding this structure is the first step in learning HTML website design.
Without this structure, browsers might try to guess how to display your content, which can lead to unpredictable results when you build an HTML website.
HTML Document Structure Example
Here is the standard skeleton of a modern HTML5 document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my very first paragraph.</p>
</body>
</html>Code Explanation
Let’s break down this structure piece by piece:
<!DOCTYPE html>: This tells the browser to use the latest version of HTML (HTML5). It must always be the very first line.<html>: This is the root element. Every other tag goes inside this one. Thelang="en"attribute tells the browser the page is in English, which is helpful for screen readers and search engines.<head>: This section contains metadata (data about data). Nothing inside the<head>is directly visible on the webpage. It contains the page title, links to CSS files, and configuration for the browser.<body>: This is where the magic happens! Everything you want the user to see—text, images, links, buttons—goes inside the<body>tag.
Beginners sometimes put visible content (like a paragraph) inside the <head> tag, or metadata (like the <title>) inside the <body> tag. Always remember: invisible setup goes in the <head>, visible content goes in the <body>.
Nested Elements
Notice how tags are placed inside other tags in the example above. This is called nesting.
The <html> element contains the <head> and <body> elements.
The <body> element contains the <h1> and <p> elements.
To keep your code readable, it is best practice to indent nested elements (usually by 2 or 4 spaces).
Try It Yourself
Try modifying the text inside the <h1> and <p> tags to see how the visible page changes!
Key Takeaways
- Every HTML page must follow a standard structure.
<!DOCTYPE html>declares the document as HTML5.- The
<html>tag wraps the entire document. - The
<head>tag contains invisible metadata and settings. - The
<body>tag contains all the visible content shown to the user.