Protected Learning Content

AICPE Gurukul content is created for learning purposes. Printing, copying and unauthorized reuse are restricted.

AICPE Learning Hub HTML with CSS
Chapter 3
HTML Document Structure
Previous Tools & Project Setup Next Tags, Elements & Attributes
Chapter 3 | HTML Skeleton

HTML Document Structure

Every HTML page follows a standard structure. In this chapter, you will learn the meaning of doctype, html, head, title, meta tags, body section and comments.

Learn Structure Try Example

DOCTYPE

Tells the browser that the document uses modern HTML.

Head Section

Stores title, meta information and links to CSS files.

Body Section

Contains visible content shown on the webpage.

Viewport

Makes the webpage responsive on mobile and tablets.

Learning Objectives

After This Chapter, You Will Understand

This chapter teaches the basic skeleton used in every professional HTML page.

HTML Skeleton

Understand the basic structure used in every HTML document.

Head Section

Understand page title, meta tags and browser information.

Body Section

Understand where visible webpage content is written.

Viewport

Understand how viewport supports mobile-friendly pages.

Basic Skeleton

Standard HTML Document Structure

This is the standard structure you should write in almost every HTML page.

<!DOCTYPE html> # Defines modern HTML document
<html lang="en"> # Root element of the page
    <head> # Page information for browser and search engines
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My First Page</title>
    </head>
    <body> # Visible webpage content
        <h1>Welcome to HTML</h1>
        <p>This is my first webpage.</p>
    </body>
</html>
Golden Rule: The head section contains page information. The body section contains visible content.
Structure Parts

Meaning of Each Important Part

Understand the use of every basic tag in the HTML structure.

Code / Tag Meaning Visible on Page?
<!DOCTYPE html> Declares that the document is using modern HTML. No
<html> Root element that contains the complete webpage. No
<head> Contains information about the page such as title and meta tags. No
<title> Shows the page title in the browser tab. Browser Tab
<body> Contains all visible webpage content. Yes
<h1> Main heading of the page. Yes
<p> Paragraph text. Yes
Simple Memory: HTML page = Document declaration + Head information + Body content.
Meta Information

Important Meta Tags in HTML

Meta tags help browsers, mobile devices and search engines understand the page.

Charset Meta Tag

This tells the browser which character encoding to use.

<meta charset="UTF-8">

Viewport Meta Tag

This helps the page display properly on mobile and tablet screens.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Description Meta Tag

This gives a short summary of the page for SEO and search results.

<meta name="description" content="Page summary">
Practice Task: Create a new HTML file and add charset, viewport, title and description inside the head section.
Try It Yourself

Edit a Complete HTML Structure

Change the title, heading and paragraph. Then click Run Code.

HTML Code Edit and run
Output Preview Browser result
Practice Task: Change the title to “My City Page”, heading to your city name and paragraph to one sentence about your city.
Common Mistakes

Mistakes Students Should Avoid

These small mistakes can break page structure or create confusion.

Wrong Habits

  • Writing visible content inside the head section
  • Forgetting the body tag
  • Not writing the title tag
  • Missing viewport meta tag
  • Writing messy code without indentation

Correct Habits

  • Write title and meta tags inside head
  • Write visible content inside body
  • Use proper indentation
  • Keep one clean structure for every page
  • Use comments to explain important code blocks
Remember: If you write the structure properly from the beginning, your future CSS and JavaScript work becomes much easier.
Quick Quiz

Test Your Understanding

Select the correct answers and check your score.

1. Which declaration is used at the start of modern HTML document?

DOCTYPE tells the browser that the page uses modern HTML.

2. Which section contains visible webpage content?

The body section contains visible content shown on the webpage.

3. Which tag shows the page name in browser tab?

The title tag controls the browser tab title.

4. Which meta tag helps mobile-friendly display?

The viewport meta tag helps responsive display on mobile devices.

5. Page information like meta tags is written inside:

The head section stores page information for browsers and search engines.
Quick Revision

Remember These Points

Revise these before moving to Chapter 4.

DOCTYPE

It declares that the document is using modern HTML.

HTML Tag

It is the root element that contains the complete webpage.

Head Section

It contains title, meta tags, CSS links and page information.

Body Section

It contains the visible content displayed in the browser.

Title Tag

It shows the page title in the browser tab.

Viewport

It helps the webpage display properly on mobile screens.

Previous Chapter Next Chapter: Tags, Elements & Attributes