0
0
HTMLmarkup~5 mins

HTML document structure

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The HTML document structure is the basic skeleton of every webpage. It helps browsers understand and display your content correctly.

When creating any webpage from scratch.
When you want your webpage to be readable by browsers and search engines.
When you want to organize your webpage content clearly.
When you want to add metadata like page title or language.
When you want to ensure accessibility and proper page layout.
Syntax
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
  </head>
  <body>
    <!-- Your visible content goes here -->
  </body>
</html>

The <!DOCTYPE html> tells the browser this is an HTML5 document.

The <html> tag wraps all the content and sets the language.

Examples
A minimal HTML document with a title and a paragraph.
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simple Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>
HTML document set for French language with proper character encoding.
HTML
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Page en Français</title>
  </head>
  <body>
    <h1>Bonjour!</h1>
  </body>
</html>
Sample Program

This example shows a complete HTML document with semantic sections: header, main, and footer. It includes metadata for character set and responsive design.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Website</h1>
    </header>
    <main>
      <p>This is a simple page to show the HTML document structure.</p>
    </main>
    <footer>
      <p>© 2024 My Website</p>
    </footer>
  </body>
</html>
OutputSuccess
Important Notes

Always include lang attribute in <html> for accessibility and SEO.

Use <meta charset="UTF-8"> to support most characters and symbols.

The <meta name="viewport"> tag helps your page look good on phones and tablets.

Summary

The HTML document structure is the foundation of every webpage.

It includes <!DOCTYPE html>, <html>, <head>, and <body> tags.

Proper structure helps browsers display your page correctly and improves accessibility.