logo

HTML Document Structure

Every HTML document follows a basic structure. This structure tells the browser what version of HTML is being used, where the document starts, and how it should be displayed.

Here’s the simplest HTML5 structure:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

Now let’s break it down into parts 👇

1. Doctype Declaration

  • Written as:

    <!DOCTYPE html>

  • Appears at the very top of the HTML document.

  • Tells the browser which HTML version is being used.

  • In HTML5, it is very simple and case-insensitive (<!DOCTYPE html>).

  • In older versions like HTML 4.01 or XHTML, Doctype declarations were long and complex.

👉 Without Doctype, browsers may go into quirks mode (an older rendering mode) which can cause display problems.

2. <html> Root Element

  • <html> is the root element of the page.

  • All HTML code is written inside <html>...</html>.

  • It contains two main parts:

    1. <head> section → Information about the document.
    2. <body> section → Content of the document.

Example:

<html>
  <!-- head and body go here -->
</html>

👉 It acts like the "container" for the entire web page.

3. Head Section (<head>)

  • <head> contains metadata (information about the page, not visible directly on the page).

  • Common things inside <head>:

    • <title> → Name of the page (appears on browser tab).
    • <meta> → Provides info like character encoding, keywords, author, viewport for mobile.
    • <link> → Connects external CSS files.
    • <style> → Internal CSS.
    • <script> → JavaScript code.

Example:

<head>
  <meta charset="UTF-8" />
  <title>Student Project</title>
</head>

👉 Think of <head> as the brain of the webpage.

4. Body Section (<body>)

  • <body> contains all the content that is visible to the user in the browser window.

  • Examples of what goes inside <body>:

    • Text (paragraphs, headings)
    • Images, videos, audio
    • Tables, lists
    • Forms
    • Links, buttons

Example:

<body>
  <h1>Welcome to My Website</h1>
  <p>This is visible content.</p>
</body>

👉 Think of <body> as the face of the webpage.

5. HTML5 Tags like <Doctype>, <Meta>, and <HTML>

(i) Doctype

  • In HTML5:

    <!DOCTYPE html>

  • Declares that the document is HTML5.

  • Simple and universal.

(ii) Meta

  • Meta tags provide metadata (data about the page).

  • Placed inside <head>.

  • Examples:

    <meta charset="UTF-8" />
<!-- Character encoding -->
<meta name="author" content="John Doe" />
<!-- Author -->
<meta name="keywords" content="HTML, CBSE, Class 10" />
<!-- Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- For mobiles -->

👉 These are not shown directly, but help with SEO, accessibility, and browser behavior.

(iii) HTML

  • <html> is the root tag of the document.

  • In HTML5, we can also specify the language using lang attribute:

    <html lang="en"></html>

  • Helps browsers, search engines, and accessibility tools understand the content better.

✅ Quick Recap for Exams:

  • <!DOCTYPE html> → Defines HTML5 version.
  • <html> → Root of the document.
  • <head> → Metadata (title, meta, links).
  • <body> → Visible content.
  • HTML5 improved <doctype>, made <meta> more powerful, and <html> more descriptive with attributes like lang.

Back to Topics

Take the test