Structure of a Web Page
Every HTML page follows a basic structure. Once you understand what belongs in
<html>, <head>, and <body>,
you can understand almost every HTML document much more easily.
The head contains information about the page, while the body contains the content users see.
The complete document is wrapped inside the <html> element,
which acts as the root of the page.
<head> = information about the page.
<body> = content displayed on the page.
🧱 The basic structure
Page information, metadata, title, links to CSS and other resources.
Visible headings, paragraphs, images, links, forms, tables and other content.
💻 A complete HTML page
🔎 Understand the code line by line
Line 1: Declares the document as a modern HTML document. It helps the browser render the page in standards mode.
Line 2: Starts the root HTML element. The lang
attribute tells browsers and assistive technologies that the primary language is English.
Line 3: Starts the head section. Its contents generally provide information and resources for the document rather than the main visible page content.
Line 4: Sets the document character encoding to UTF-8, allowing the page to represent a wide range of characters.
Line 5: Helps the page use the device viewport appropriately, which is important for responsive layouts on mobile devices.
Line 6: Defines the document title shown by the browser, typically in the tab.
Line 7: Closes the head section.
Line 8: Starts the body. Content placed here is what the page can display to users.
Line 9: Creates the main heading of the example page.
Line 10: Creates a paragraph of visible content.
Line 11: Closes the body section.
Line 12: Closes the root HTML element and therefore the document.
🧠 What goes inside the <head>?
<title>Page title
Defines the title associated with the document, normally shown in the browser tab.
<meta>Metadata
Provides information such as character encoding, viewport settings and other metadata.
<link>External resources
Commonly connects the document to stylesheets, icons and other linked resources.
<style>CSS
Can contain CSS rules that apply to the document.
<script>JavaScript
Can load or contain scripts used by the page.
<base>Base URL
Can define the base URL used to resolve relative URLs in a document.
👀 What goes inside the <body>?
<h1> through <h6>
Paragraphs, quotations and other text content.
Navigation using the <a> element.
Images using the <img> element.
Ordered and unordered lists.
Inputs, buttons and form controls.
Tabular data using rows and cells.
Audio, video and other embedded content.
🏗️ Visual page structure
🧩 Important semantic elements
<header>Introductory content or a section's header.
<nav>A section containing navigation links.
<main>The dominant content of the document.
<section>A thematic grouping of content.
<article>Self-contained content that can stand on its own.
<aside>Content related to the surrounding content.
<footer>Footer information for a document or section.
⚠️ Common mistakes
The head is for document information and resources. Visible page content generally belongs in the body.
Learn the relationship between <html>, <head>, and <body>
before moving to more complex pages.
Use semantic elements when they accurately describe the purpose of the content.
HTML describes structure and meaning. CSS controls presentation and layout.
📝 Practice
Create a basic page
Build an HTML document with doctype, html, head, title, body, heading and paragraph.
Create a semantic layout
Use header, nav, main, section, article, aside and footer to structure a page.
Build a portfolio structure
Create a semantic portfolio page with navigation, projects, skills, contact and footer sections.
🎯 Interview questions
What are the main parts of an HTML document?
A basic document contains a doctype declaration and an <html>
root element containing <head> and <body>.
What is the difference between head and body?
The head contains document information and resources, while the body contains the main content displayed by the page.
Why do we use the lang attribute?
It identifies the primary language of the document and can help browsers and assistive technologies interpret the content.
What is the purpose of the viewport meta tag?
It helps the document's layout use the device viewport appropriately, which is important for responsive pages.
What is the purpose of semantic elements?
They communicate the purpose and structure of content more clearly than generic containers.
<html> → <head> + <body>.
The head describes the document; the body contains its page content.
⚡ Quick Summary
<html>is the root element of an HTML document.<head>contains document information and linked resources.<body>contains the content displayed on the page.<title>defines the document title shown by the browser.- Meta elements provide useful document metadata.
- Semantic elements make page structure more meaningful.
- HTML provides structure; CSS normally controls the visual layout.