Basic Document Structure0%
VS-Code Setup

Basic Document Structure

Beginner8 min readā€¢Updated: 2026-09-09
Study Materials

Basic Document Structure (The HTML Skeleton)

Welcome to Topic 1.2! šŸš€

Whenever you write a Leave Application in school, it follows a standard, fixed format:

  1. 1
    At the top: To The Principal
  2. 2
    Next: Subject
  3. 3
    Then: Respected Sir/Madam
  4. 4
    In the middle: The Main Body of the Application
  5. 5
    At the bottom: Thanking You, Yours Obediently

If you change the order or mix these sections, the application will not look right. In the exact same way, every HTML webpage has a standard fixed skeleton. In web development, we call this the HTML Boilerplate.

Standard HTML5 Boilerplate Code

Whenever you create a new HTML file, you start with this essential structure:

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>
<h1>Welcome to MSK Institute!</h1>
<p>I am a Class 10 student and I am learning HTML5.</p>
</body>
</html>

Let us understand what each line does in simple, clear terms!

Line-by-Line Explanation

1. <!DOCTYPE html>

  • What it means: Document Type Declaration.
  • It tells the web browser: "This webpage is written using modern HTML5."
  • It is not an HTML tag, but an important command for the browser. It helps the browser display the page smoothly without using old, slow modes.

2. <html lang="en">

  • What it means: The Root Element (The main parent container).
  • All your HTML code lives inside this tag. Without it, you cannot have an HTML document.
  • lang="en" is an attribute that tells search engines (like Google) and browsers that the content of this page is in the English language.
  • This tag closes at the very end of your file as </html>.

3. <head> Tag (The "Brain" of the Page - Invisible Section)

  • The <head> tag holds settings and instructions that are not directly visible on the screen, but are extremely important for the browser and Google search.
  • Just like our human brain is hidden inside the skull but controls the whole body, the <head> controls page settings.

Inside <head>, we normally have three main tags:

  1. 1
    <meta charset="UTF-8">:
  • Computers store everything in binary numbers (0 and 1).
  • UTF-8 is a universal character system that accurately displays all letters from every language (English, Hindi, etc.), math symbols, currency signs (like ā‚¹, $), and emojis (šŸ”„, šŸš€, ā¤ļø).
  • Without this tag, Hindi text or emojis might display as broken, strange symbols (like ????).
  1. 1
    <meta name="viewport" content="width=device-width, initial-scale=1.0">:
  • This tag makes your website Mobile-Friendly.
  • width=device-width: Tells the browser to adjust the page width to fit the physical screen size of any device (smartphones, tablets, or laptops).
  • initial-scale=1.0: Sets the normal zoom level to 100% when the page first loads.
  1. 1
    <title>My First Webpage</title>:
  • This is the title that appears on the browser tab at the very top of your screen.
  • When you bookmark a page, this title is saved as its name.

4. <body> Tag (The "Body" of the Page - Visible Section)

  • Everything you actually see on the screen (headings, paragraphs, pictures, videos, buttons, tables) is written between <body> and </body>!
  • For example:
  • <h1>Welcome to MSK Institute!</h1> āž”ļø Displays a large, bold heading.
  • <p>I am learning HTML5.</p> āž”ļø Displays regular paragraph text.
Pro Tip
Golden Rule to Remember: If you want users to see it on the screen, write it inside <body>. If it is a setting or configuration for the browser, write it inside <head>.

Visual Tree: Document Structure

You can imagine an HTML webpage like a tree with two main branches:

Output
šŸ“„ HTML Page (<html>)
ā”‚
ā”œā”€ā”€ šŸ§  <head> (Invisible - Settings & Brain)
ā”‚ ā”œā”€ā”€ <meta charset="UTF-8"> (Language & Emoji Support)
ā”‚ ā”œā”€ā”€ <meta name="viewport"> (Mobile Screen Fit)
ā”‚ ā””ā”€ā”€ <title> (Name on Browser Tab)
ā”‚
ā””ā”€ā”€ šŸ§ <body> (Visible - Everything on Screen)
ā”œā”€ā”€ <h1> (Main Big Heading)
ā”œā”€ā”€ <p> (Paragraph Text)
ā””ā”€ā”€ <img>, <button>, etc. (Photos and Buttons)

Difference Between <head> and <body>

Feature<head> Tag<body> Tag
Is it visible on screen?No (Invisible)Yes (Visible)
What do you put inside?Page title, metadata, mobile settingsHeadings, paragraphs, photos, videos, links
Who is it for?For the browser and search engines (Google)For visitors and users reading your website
Real-Life AnalogyHuman Brain & MemoryHuman Face, Hands & Body

Common Beginner Mistakes to Avoid

  1. 1
    āš ļø Placing Visible Content Inside <head>:
  • If you write <p> or <h1> inside <head>, it is bad coding practice and can break your website's layout. Always put visible content inside <body>.
  1. 1
    āš ļø Forgetting <!DOCTYPE html>:
  • Without this, browsers may enter "Quirks Mode" (an old, slow way of rendering), and modern features may not work properly.
  1. 1
    āš ļø Forgetting to Close Tags:
  • Always remember to close </body> and </html> at the bottom of your file.

Quick Summary

  • <!DOCTYPE html> tells the browser this file uses modern HTML5.
  • <html> is the root container of the whole webpage.
  • <head> contains invisible settings, UTF-8 encoding, and the <title>.
  • <body> contains all visible elements (headings, text, images).
  • <meta name="viewport"> ensures the website looks great on mobile phones.

Practice Quiz

Test your understanding with these questions:

1. Which tag sets the text shown on the browser tab?

A. <heading> B. <title> C. <meta> D. <body> Answer: B Explanation: The <title> tag is placed inside the <head> section and defines the title that appears on the browser tab.

2. Where should all visible content (headings, paragraphs, images) be placed?

A. <head> B. <title> C. <body> D. <html> Answer: C Explanation: All visible content that users interact with on the screen must be placed inside the <body> tag.

3. What is the primary purpose of <!DOCTYPE html>?

A. To change the background color of the webpage B. To tell the browser that the document is written in modern HTML5 C. To connect the webpage to the internet D. To add an image to the webpage Answer: B Explanation: <!DOCTYPE html> is the document type declaration that tells web browsers to render the page using the latest HTML5 standard.

4. What is the role of <meta charset="UTF-8"> inside <head>?

A. To make the text bold B. To tell the browser to support universal characters, including Indian Rupee symbols, Hindi, and emojis C. To connect to Wi-Fi D. To set the font size to 8px Answer: B Explanation: UTF-8 character encoding allows the browser to display virtually all written languages, symbols, and emojis without corruption.

5. Why is the <title> tag placed inside <head> instead of <body>?

A. Because it is metadata displayed on the browser tab and Google search results, not inside the page body B. Because body does not support English C. Because title only works on mobile phones D. Because head makes the title colorful Answer: A Explanation: The <title> is metadata about the document and appears on the browser tab strip and in search engine search snippets.

Practice Challenge (Hands-on Exercise)

  1. 1
    Open Notepad or any text editor on your computer.
  2. 2
    Create a new file named: about-me.html.
  3. 3
    Type the standard boilerplate code shown above.
  4. 4
    Set the <title> to: About Me | Class 10.
  5. 5
    Inside <body>, add:
  • An <h1> heading with your name.
  • A <p> paragraph describing your two favorite school subjects or hobbies.
  1. 1
    Save the file and open it in Google Chrome to check your work! šŸŽÆ
Next Lesson

VS-Code Setup

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Introduction to HTMLVS-Code Setup

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext