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.
Table of Content
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
What is the basic HTML document structure?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Why is DOCTYPE important in HTML document structure?
- Defines the document type (HTML5 by default)
- Helps browsers render pages correctly
- Without it, layout may break
<!DOCTYPE html>
What are the main parts of an HTML document?
<!DOCTYPE html>→ Declares HTML version<html>→ Root element<head>→ Metadata & links<body>→ Visible content
How do I create a complete HTML5 document structure?
<!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
The form autocomplete attribute in HTML helps users fill out forms faster because it shows them saved input for common…
Paragraphs help group-related text. They build clear, readable pages. You use them to split ideas or topics. The HTML p…
The <ins> tag in HTML shows text that the author added after the original content. This helps readers know what…
The <dialog> tag is used to build modal popups in HTML. It shows alerts and messages without third-party scripts. Understand…
HTML5 gave the web new elements that describe content with more meaning. Developers now use these elements to build pages…
HTML Boolean attributes control the behavior of elements and do not need a value. These attributes simplify logic and reduce…
The HTML class attribute helps group elements. It helps you update the page style without changing the structure of HTML.…
The HTML <cite> tag is a small but important tool for marking up the title of a creative work. You…
The header tag defines the top part of a page or a section in HTML. It usually holds a heading…
The HTML samp tag shows the result of a computer program or command. It helps readers know which text came…
