>_
CodeXPal
📄

HTML Document Structure

Beginner
70 XP
25 min
Lesson Content

Understanding HTML Document Structure

Every HTML document follows a specific structure that browsers understand. Let's break down each part:

1. DOCTYPE Declaration

<!DOCTYPE html>

This tells the browser that this is an HTML5 document.

2. HTML Element

<html lang="en">
  <!-- All content goes here -->
</html>

The root element that contains all other elements. The lang attribute specifies the language.

3. Head Section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>

Contains metadata about the document that isn't displayed on the page:

  • charset: Character encoding (UTF-8 is standard)
  • viewport: Controls how the page is displayed on mobile devices
  • title: Appears in the browser tab

4. Body Section

<body>
  <!-- All visible content goes here -->
  <h1>Main Heading</h1>
  <p>This content is visible to users.</p>
</body>

Contains all the visible content that users see on the webpage.

Complete Structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is the main content area.</p>
  </body>
</html>
Example Code

Create a properly structured HTML document with all required elements

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is a complete HTML document.</p>
  </body>
</html>

Expected Output:

Welcome
Study Tips
  • •Read the theory content thoroughly before practicing
  • •Review the example code to understand key concepts
  • •Proceed to the Practice tab when you're ready to code