Course Content
Section 1: Introduction
You can copy this EXACT structure directly into Tutor LMS → Courses → Curriculum.
0/2
What is HTML?
How to Set Up Your Coding Environment
HTML Basics
You can copy this EXACT structure directly into Tutor LMS → Courses → Curriculum.
0/2
HTML Document Structure
Headings, Paragraphs & Comments
Test Course

⭐ HTML Document Structure

Every HTML webpage follows a standard structure. This structure helps the browser understand how to read, interpret, and display the content on the screen.
Think of it like the blueprint of a webpage.

Below is the basic structure of an HTML document:

⭐ Basic HTML Structure

 
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

Let’s break it down step by step.

⭐ 1. <!DOCTYPE html>

  • This is the document type declaration.

  • It tells the browser that this file is an HTML5 document.

  • It must always be the first line of every HTML file.

⭐ 2. <html>...</html>

  • This is the root element of the webpage.

  • Everything inside the webpage is written between these tags.

  • It contains two main sections:

    • <head>

    • <body>

⭐ 3. <head>...</head>

The <head> section contains information about the webpage, not the content that appears on the screen.

This is called metadata.

Common things inside the head:

  • <title> — title of the page shown in the browser tab

  • <meta> — SEO information, keywords, description

  • <link> — linking CSS files

  • <script> — linking JavaScript files

  • <style> — internal CSS

Example:

 
<head>
<title>My First Page</title>
<meta charset="UTF-8">
</head>

⭐ 4. <body>...</body>

Everything you see on the webpage is inside the <body> section.

Examples:

  • Headings

  • Paragraphs

  • Images

  • Buttons

  • Forms

  • Tables

Example:

 
<body>
<h1>Welcome!</h1>
<p>This is my first webpage.</p>
</body>

⭐ HTML Structure Diagram (Easy to Understand)

 
+----------------------------------------------------+
| <!DOCTYPE html> |
| <html> |
| <head> |
| Page information (title, metadata, etc.) |
| </head> |
| |
| <body> |
| Visible content (text, images, links) |
| </body> |
| </html> |
+----------------------------------------------------+
Previous
Next
Scroll to Top