HTML Document Structure, DOCTYPE, Head, Body, and Metadata
Learn the basic skeleton of every HTML document and understand why metadata matters for browsers, SEO, sharing, and user experience.
Inside this chapter
- The Basic HTML Skeleton
- What the DOCTYPE Does
- What Belongs in Head vs Body
- Important Metadata
- Why Language Attribute Matters
- Professional Habit to Build Early
Series navigation
Study the chapters in order for the clearest path from HTML basics and document structure to semantics, accessibility, SEO, maintainability, and advanced markup practice. Use the navigation at the bottom to move smoothly through the full tutorial series.
The Basic HTML Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>This skeleton is the starting point for nearly every HTML page. Students should understand what each part contributes before moving forward.
What the DOCTYPE Does
The <!DOCTYPE html> declaration tells the browser to render the page in standards mode. Without it, browsers may fall back to older compatibility behavior that can create layout and parsing issues.
What Belongs in Head vs Body
The <head> contains metadata such as title, charset, viewport settings, stylesheets, icons, descriptions, and social sharing information. The <body> contains the visible document content users interact with.
Important Metadata
- Page title for browser tabs and search display
- Description metadata for search and previews
- Viewport settings for responsive behavior
- Charset declaration for correct text interpretation
- Open Graph and sharing metadata for social platforms
Why Language Attribute Matters
The lang attribute on the <html> element helps assistive technologies, search engines, and browser tools interpret the document language correctly.
Professional Habit to Build Early
Students should treat document setup as part of page quality, not as filler. Many production issues involving SEO, mobile rendering, text encoding, or sharing previews come from weak or missing metadata.