Introduction to Web Document Structure and Metadata
From the 123 curriculum
Introduction to Web Document Structure and Metadata
TL;DR
Web documents, like HTML files, are built with a specific structure using elements to organize content. Metadata provides crucial information about the document itself, like its title or character set, without being visible on the page. Understanding these helps you create well-organized, accessible, and searchable web content.
1. The Mental Model
Think of a web document like a house: it has a foundation and walls (structure) to hold everything together. Then it has a blueprint or label (metadata) that tells you what kind of house it is, who owns it, and where it's located, even before you go inside.
2. The Core Material
When you look at a web page, you're seeing content organized by HTML (HyperText Markup Language). HTML uses elements, which are like building blocks, to define the different parts of a document. Each element usually has an opening tag, some content, and a closing tag, like <p>This is a paragraph.</p>.
2.1 Basic Document Structure (<html>, <head>, <body>)
Photo by Pixabay on Pexels
Every HTML document follows a fundamental structure. It all starts with the <!DOCTYPE html> declaration, which tells the browser you're using HTML5.
The main container for everything is the <html> element. Inside <html>, you'll always find two main sections:
<head>: This section contains metadata—information about the document. Nothing inside<head>is directly displayed on the page itself, but it's super important for browsers, search engines, and accessibility tools.<body>: This is where all the visible content of your web page goes. Headings, paragraphs, images, links, lists—everything you see and interact with.
Here's a basic structure:
<!DOCTYPE html>
<html>
<head>
<!-- Metadata goes here -->
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>
2.2 Understanding Metadata (<meta>, <title>, <link>)
Photo by Markus Winkler on Pexels
Metadata gives instructions and information about your document. It lives exclusively in the <head> section.
<title>: This is one of the most important metadata elements. It defines the title that appears in the browser tab or window title bar. It's also what search engines often use as the main title for your page in search results.
html <head> <title>My Awesome Web Page</title> </head><meta>: This is a versatile tag used for many kinds of metadata. It's a self-closing tag (it doesn't have a closing</meta>).- Character Set (
charset): You'll almost always see<meta charset="utf-8">. This tells the browser how to interpret characters (like emojis or special symbols) correctly.utf-8is the standard and best choice. - Description (
name="description"):<meta name="description" content="A short summary of what this page is about for search engines.">This content often appears below the title in search results, helping people decide if they want to click your link. - Keywords (less common now):
<meta name="keywords" content="web, html, structure, metadata">Historically used for search engines, but less impactful today. - Viewport (
name="viewport"):<meta name="viewport" content="width=device-width, initial-scale=1.0">This is crucial for responsive web design, telling browsers how to scale your page on different devices (phones, tablets, desktops).
- Character Set (
<link>: This element is used to link your HTML document to external resources, most commonly CSS stylesheets. It's also a self-closing tag.
html <head> <link rel="stylesheet" href="styles.css"> </head>
Here,rel="stylesheet"tells the browser it's a stylesheet, andhref="styles.css"points to the file containing your styling rules.
2.3 Document Structure Hierarchy
Photo by Ann H on Pexels
It's helpful to visualize how these elements fit together.
graph TD
A["<!DOCTYPE html>"] --> B["<html>"]
B --> C["<head> (Metadata)"]
B --> D["<body> (Visible Content)"]
C --> C1["<title>"]
C --> C2["<meta charset='utf-8'>"]
C --> C3["<meta name='description'>"]
C --> C4["<link rel='stylesheet'>"]
D --> D1["<h1>"]
D --> D2["<p>"]
D --> D3["<img>"]
3. Worked Example
Let's build a simple HTML page demonstrating structure and metadata.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn about HTML document structure and metadata with this simple example.">
<title>My First Structured Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to My Page!</h1>
</header>
<main>
<p>This is a paragraph of content within the main section of my document.</p>
<img src="placeholder.png" alt="A simple placeholder image.">
</main>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
In this example:
* lang="en" on <html> tells browsers the primary language of the document is English.
* The <head> contains a character set, viewport setting, a description for search engines, the page title, and a link to an external stylesheet (style.css - which would contain CSS rules to style this page).
* The <body> contains the visible content, using semantic HTML5 elements like <header>, <main>, <p>, <img>, and <footer> to organize different parts of the page.
4. Key Takeaways
- Every web page starts with
<!DOCTYPE html>and is wrapped in an<html>tag. - The
<head>section holds metadata—information about the document, not visible content. - The
<body>section contains all the visible content that users see and interact with. - The
<title>tag in the<head>sets the browser tab title and is important for SEO. <meta>tags provide various types of metadata like character encoding, descriptions, and viewport settings.<link>tags, often used in the<head>, connect your HTML to external resources like CSS stylesheets.
Common Mistakes to Avoid:
- Putting visible content inside the <head> tag; it won't display correctly.
- Forgetting <!DOCTYPE html>; it can lead to inconsistent rendering in browsers.
- Not including <meta charset="utf-8">; this can cause character display issues.
- Missing a <title> tag; it makes your page look unprofessional and hurts SEO.
5. Now Try It
Create a new HTML file named my-profile.html. Inside it, set up the basic HTML structure (<!DOCTYPE html>, <html>, <head>, <body>). Give your page a title like "My Online Profile". Add a meta description that summarizes your interests. In the <body>, put your name in a heading (<h1>) and a short paragraph about why you're learning web development (<p>).
What success looks like: When you open my-profile.html in a browser, you should see "My Online Profile" in the browser tab, your name as a large heading, and your paragraph below it. The page source (right-click -> "View Page Source") should clearly show your <!DOCTYPE>, <html>, <head> (with title and meta description), and <body> with your content.
Frequently asked about Introduction to Web Document Structure and Metadata
Study this next
Get the full 123 curriculum
Clone the complete plan to your dashboard for unlimited AI-generated notes, practice quizzes, and a personalised revision schedule.
Create Free Account