Document Structure
Overview
A valid HTML5 document is strictly divided into two distinct regions: the <head> and the <body>. The <head> acts as the 'brain' of the document, containing critical, non-visual configuration data (meta tags, CSS links, page titles) that search engines and browsers need before rendering. The <body> acts as the 'body', containing everything that is actually visible to the user on the screen. Mixing these two up will cause severe rendering bugs.
Syntax
<!DOCTYPE html>
<!-- The root element encompassing the entire document -->
<html lang="en">
<!-- THE HEAD: Configuration (Invisible) -->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<!-- THE BODY: Content (Visible) -->
<body>
<main>
<h1>Dashboard Analytics</h1>
</main>
</body>
</html>Common Pitfalls
- Putting visual elements (like an
<h1>or<img>) inside the<head>. The browser will forcefully eject them and inject them into the<body>, tearing your DOM structure apart. - Forgetting the
lang="en"attribute on the<html>tag. Screen readers rely entirely on this attribute to know what accent/language to use when speaking the page out loud to visually impaired users.
Interview Questions
<html> tag need a lang attribute?It is a critical accessibility and SEO requirement. It tells search engines exactly what language the page is written in, and it ensures assistive screen readers use the correct pronunciation algorithms.
Real-World Example
The strict skeletal frame required for every single React or Next.js Single Page Application (SPA).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<!-- The single entry point where React mounts the entire application -->
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>Check Your Knowledge
Test your understanding of Document Structure with these quick questions.