HTML and CSS Document Structure
HTML & CSS: Document Structure
Understand how an HTML document is organized, how the <head> and <body> interact, and where CSS fits into the structure.
HTML Boilerplate
Every page starts with:
- the
!DOCTYPE <html>element- metadata in the
<head> - visible content in the
<body>
Note: Doctype tells the browser to use modern standards, metadata is information about the page, and the body holds what people see.
A boilerplate is a template that you can copy and paste to save time.
Here is a boilerplate for an HTML page:
Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document Title</title>
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
If you want to read more or get an in-depth understanding, see HTML Basic and HTML Head in the HTML tutorial.
Head metadata
<meta charset="UTF-8">ensures proper character rendering.<meta name="viewport">makes layouts responsive.<link rel="stylesheet">attaches external CSS.<script>tags typically load at the end of<body>to avoid blocking rendering.- Use
<title>for the browser tab and SEO, plus<meta name="description">for search snippets.
Layout containers
Use semantic wrappers to provide meaning:
<header>- branding or navigation at the top.<nav>- primary site navigation links.<main>- unique content for the page (one per page).<section>,<article>,<aside>- subsections with their own headings.<footer>- closing information, links, copyright.
If you want to read more or get an in-depth understanding, see HTML Layout and HTML Semantic Elements in the HTML tutorial.
Organizing CSS
Link your CSS file in the head so styles load before the page renders.
For critical CSS, you can inline minimal styles directly, but prefer external files for maintainability.
Note: "Critical CSS" means tiny pieces of CSS that must load immediately to avoid flashes of unstyled content.
Example
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
These tags optimize performance by preconnecting to the font host, loading a web font stylesheet, and linking your main CSS file.
Preconnecting to the font host and loading a web font stylesheet is important because without it, the browser has to wait for the font to load before rendering the page.
Accessibility hooks
- Add
langon<html>for screen readers. - Ensure each
<section>has a heading; otherwise usearia-label. - Keep heading levels in order (h1 → h2 → h3) to describe hierarchy.
If you want to read more about HTML Accessibility or get an in-depth understanding, go to HTML Accessibility in the HTML tutorial.
Semantic layout demo
This demo shows a complete page shell with header, nav, main sections, and footer using semantic HTML, paired with basic page styles.
Syntax highlights: metadata in the head, semantic containers in the body, and an external stylesheet linked via <link rel="stylesheet">.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Structured Page</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<h1>Sky Labs</h1>
<nav>
<a href="#services">Services</a>
<a href="#team">Team</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="services">
<h2>Services</h2>
<p>We craft responsive websites and design systems.</p>
</section>
<section id="team">
<h2>Team</h2>
<p>Meet the engineers and designers who make it happen.</p>
</section>
</main>
<footer>
<p>© 2025 Sky Labs. Built with HTML & CSS.</p>
</footer>
</body>
</html>
body {
font-family: "Source Sans Pro", sans-serif;
margin:0;
background:#f1f5f9;
}
header, footer {
background:#0b1120;
color:#fff;
padding:32px;
}
nav a {
color:#7dd3fc;
margin-right:16px;
text-decoration:none;
}
main {
max-width:960px;
margin:0 auto;
padding:40px 24px;
}
section {
background:#fff;
padding:24px;
border-radius:12px;
margin-bottom:24px;
}
The CSS sets consistent spacing, colors the header/footer, and constrains the content width for readability while each section remains clearly labeled.
Checklist
- Document has a valid doctype and language attribute.
- Head contains viewport, charset, title, and stylesheet links.
- Body uses semantic wrappers with meaningful headings.
- CSS is external (unless purposefully inlined).
