HTML Document Structure Guide for Beginners

A web page must follow a clear structure so browsers can read and show it correctly. This guide helps you to learn how the HTML document structure works step by step.

What is Document Structure in HTML?

An HTML page follows a simple order. Put <!DOCTYPE html> at the top. Then use <html> and inside it, <head> holds page info, and <body> holds what people see.

Here is a quick example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a page example</p>
  </body>
</html>

This example shows a page that has a title in the head section and visible content in the body section.

The DOCTYPE tells the browser how to read the file. It is not a tag. You must place it at the very top of the file.

Here is what you need to write at the top:

<!DOCTYPE html>

This makes the browser read the file in standard mode and not in quirks mode.

The <head> section defines data that is not visible on the page. It can hold a title and meta tags. Also, it can include links to style files and scripts.

For example:

<head>
  <title>News Page</title>
  <meta charset="UTF-8">
  <meta name="description" content="Daily news update">
  <link rel="stylesheet" href="style.css">
</head>

The <body> holds headings, paragraphs, lists, tables, forms, and scripts. Add as many sections as you need — each element makes a part of the page.

Here is an example:

<body>
  <h1>HTML tutorials for beginners</h1>
  <<p>FlatCoding helps you learn many programming languages, web development skills, and coding projects step by step.</p>
</body>

Examples of Document Structure in HTML

Simple Page Layout:

<!DOCTYPE html>
<html>
  <head>
    <title>Basic Layout</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This page shows a simple HTML layout</p>
  </body>
</html>

This example shows the simplest page you can make. It has a DOCTYPE, <html>, a <head> with a title, and a <body> with a heading and a paragraph.

Page with Metadata and Styles:

<!DOCTYPE html>
<html>
  <head>
    <title>Styled Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h2>Article</h2>
    <p>The body text appears with style from the CSS file</p>
  </body>
</html>

This example adds metadata and links to a style file. The head defines extra data for the page, and the body shows the content with style rules.

Page with Script and Section Content:

<!DOCTYPE html>
<html>
  <head>
    <title>Interactive Page</title>
    <script>
      function greet() {
        alert("Hello User");
      }
    </script>
  </head>
  <body>
    <section>
      <h2>Click the Button</h2>
      <button onclick="greet()">Click Me</button>
    </section>
  </body>
</html>

This example adds a script inside the head. The body has a section with a button that calls the script. The button action shows an alert when clicked.

Page with Nested Elements and Layout:

<!DOCTYPE html>
<html>
  <head>
    <title>Nested Layout</title>
  </head>
  <body>
    <header>
      <h1>Site Title</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
    <main>
      <article>
        <h2>Post Title</h2>
        <p>This article shows nested content inside main</p>
      </article>
    </main>
    <footer>
      <p>Copyright 2025</p>
    </footer>
  </body>
</html>

This example shows a more advanced layout. The body has header, nav, main, article, and footer elements. Each section has its own role in the document.

Wrapping Up

You learned about HTML document structure and how to use DOCTYPE, head, and body. You also saw how metadata works and how to place content inside the body.

Here is a quick recap:

• DOCTYPE must be at the top.
• The <html> tag wraps the full document.
• The <head> section stores metadata and links.
• The <body> section holds visible content.
• You can mix elements in the body to form page layout.

FAQs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete HTML5 Structure</title>
  </head>
  <body>
    <header>Site Header</header>
    <main>Main Content</main>
    <footer>Footer Info</footer>
  </body>
</html>

Similar Reads