HTML · HTML Document Structure · Lesson 2 of 32

HTML Document Structure

2. HTML Document Structure

Every HTML webpage follows a basic document structure. This structure tells the web browser how the document should be interpreted and displayed.

Key Idea:

An HTML document is generally divided into two major parts: the <head> and the <body>.

Basic HTML Document

<!DOCTYPE html>
<html>

<head>
    <title>My First Webpage</title>
</head>

<body>

    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>

</body>

</html>

Understanding the Structure

Element Purpose
<!DOCTYPE html> Declares that the document uses the HTML5 standard.
<html> Root element of the HTML document. All other HTML elements are placed inside it.
<head> Contains metadata and information about the webpage that is generally not displayed as page content.
<title> Specifies the title displayed in the browser tab.
<body> Contains the visible content of the webpage.

1. <!DOCTYPE html>

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

It must normally appear at the very beginning of an HTML document. 

<!DOCTYPE html>
Remember:

<!DOCTYPE html> is a declaration, not an HTML element.

2. The <html> Element

The <html> element is the root element of an HTML document.

It contains the <head> and <body> sections. 

<html>

    <head>
        ...
    </head>

    <body>
        ...
    </body>

</html>

3. The <head> Element

The <head> section contains information about the webpage. Much of this information is intended for the browser, search engines, and other software rather than being displayed directly as webpage content.

Common elements inside <head> include:

  • <title> – Defines the webpage title.
  • <meta> – Provides metadata about the webpage.
  • <link> – Connects external resources, such as CSS files.
  • <style> – Contains internal CSS.
  • <script> – Embeds or references JavaScript.

4. The <title> Element

The <title> element specifies the title of the webpage. 

<head>

    <title>CodeStep Academy</title>

</head>

The title normally appears in the browser tab and may also be used by search engines as part of the search result title.

5. The <body> Element

The <body> contains the main content displayed on the webpage.

Headings, paragraphs, images, links, tables, forms, lists, videos and other visible webpage content are generally placed inside the body. 

<body>

    <h1>CodeStep Academy</h1>

    <p>
        Learn HTML from beginner to advanced.
    </p>

</body>

Complete Example

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>CodeStep Academy</title>

</head>

<body>

    <h1>Welcome to CodeStep Academy</h1>

    <p>
        Learn HTML from beginners to advanced.
    </p>

</body>

</html>

Why is lang="en" Used?

The lang attribute specifies the primary language of the webpage. 

<html lang="en">

Here, en represents English.

Specifying the language helps browsers, search engines, screen readers and accessibility tools understand the language of the webpage.

Why is <meta charset="UTF-8"> Used?

The charset attribute specifies the character encoding used by the webpage. 

<meta charset="UTF-8">

UTF-8 supports a very large range of characters, including English, Hindi and many other languages and symbols.

Why is the Viewport Meta Tag Important?

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

This meta tag helps webpages display properly on different screen sizes, particularly mobile devices.

Important:

A responsive webpage should normally include the viewport meta tag.

Head vs Body

<head> <body>
Contains document metadata. Contains webpage content.
Usually not directly visible. Displayed in the browser window.
Contains title, meta, link, style, etc. Contains headings, paragraphs, images, tables, forms, etc.
Provides information about the document. Provides the actual page content.

HTML Document Hierarchy

HTML Document
│
├── <!DOCTYPE html>
│
└── <html>
    │
    ├── <head>
    │   ├── <meta>
    │   ├── <title>
    │   ├── <link>
    │   └── <style>
    │
    └── <body>
        ├── <h1>
        ├── <p>
        ├── <img>
        ├── <a>
        └── ...

School Website Example

Real-World Example

Consider a school website created for students, parents and teachers.

The <head> section may contain the school website title, character encoding, viewport settings, CSS references and other metadata.

The <body> may contain the school logo, navigation menu, notices, examination information, photographs, contact details and other visible content.

Common Beginner Mistakes

  • Forgetting <!DOCTYPE html>.
  • Placing visible webpage content inside <head>.
  • Forgetting to close elements that require closing tags.
  • Confusing <title> with <h1>.
  • Forgetting the viewport meta tag in responsive webpages.
  • Using multiple unnecessary <html> or <body> elements.
  • Writing HTML elements outside the main document structure.

Important Difference: <title> vs <h1>

Feature <title> <h1>
Location Inside <head> Inside <body>
Purpose Defines the webpage/document title. Defines the main visible heading.
Normally visible on webpage? No Yes

Exam Questions

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

Answer: It declares that the document is an HTML5 document and helps the browser render the page according to modern HTML standards.

2. What is the difference between <head> and <body>?

Answer: The <head> contains metadata and other information about the webpage, whereas the <body> contains the visible content displayed on the webpage.

3. Which HTML element defines the title displayed in the browser tab?

Answer: <title>

4. Which element is the root element of an HTML document?

Answer: <html>

5. What is the purpose of the viewport meta tag?

Answer: It helps the webpage adapt its layout and display appropriately on different screen sizes and devices.

Interview Questions

1. Is DOCTYPE an HTML tag?

Answer: No. <!DOCTYPE html> is a declaration that tells the browser which HTML standard the document follows.

2. What happens if DOCTYPE is omitted?

Answer: Modern browsers may enter Quirks Mode, which can cause the browser to interpret the document using older or compatibility-oriented rendering behaviour.

3. Can <title> be placed inside <body>?

Answer: No. The <title> element belongs inside the <head> element.

4. What is the difference between HTML and HTML5?

Answer: HTML5 is the modern version of HTML that introduced or standardised features such as semantic elements, multimedia support, improved forms and APIs for modern web applications.

5. Why is semantic structure important?

Answer: Semantic structure gives meaning to webpage content. It improves accessibility, search-engine understanding, maintainability and the overall structure of the webpage.

Think Like a Web Developer

Practical Challenge

You have been asked to create the homepage of a school website. The page must have the title "Mumbai Public School" in the browser tab and a visible heading "Welcome to Mumbai Public School".

Which elements would you use?

Click to View Answer

Use <title> inside the <head> for the browser-tab title and <h1> inside the <body> for the visible heading. 

<head>
    <title>Mumbai Public School</title>
</head>

<body>
    <h1>Welcome to Mumbai Public School</h1>
</body>

Practice Activity

Create a basic HTML webpage for your school with the following:

  1. School name as the browser-tab title.
  2. School name as the main heading.
  3. A short introductory paragraph.
  4. Your name as the webpage author.
  5. UTF-8 character encoding.
  6. Responsive viewport configuration.

Quick Revision

  • <!DOCTYPE html> → Declares HTML5.
  • <html> → Root element.
  • <head> → Contains metadata.
  • <title> → Browser-tab/document title.
  • <body> → Visible webpage content.
  • <meta charset="UTF-8"> → Character encoding.
  • viewport → Helps responsive display.
  • lang → Specifies the document language.

Memory Trick

DOCTYPE → HTML → HEAD → BODY

Think: Declare → Container → Information → Content

Exam Tips

  • Remember the basic HTML5 document structure.
  • Do not confuse <title> with <h1>.
  • Remember that <head> contains metadata while <body> contains visible content.
  • Know the purpose of DOCTYPE.
  • Practise writing the complete document structure without looking at notes.
  • In practical examinations, always begin with a proper HTML5 document structure.

Frequently Asked Questions (FAQs)

What is the root element of an HTML document?

The <html> element.

Where is the title of a webpage defined?

Inside the <title> element within the <head> section.

Where is the visible content of a webpage written?

Inside the <body> element.

What does UTF-8 represent?

UTF-8 is a character encoding capable of representing a very large range of characters used by different languages and writing systems.

What is the purpose of the lang attribute?

It specifies the primary language of the HTML document and supports accessibility and search-engine understanding.

Final Takeaway

A well-formed HTML webpage begins with a document declaration, followed by the root <html> element. The document is then divided into <head> and <body>. Understanding this hierarchy is essential before learning individual HTML elements.

Next Topic: HTML Elements, Tags and Attributes

Start This Course From the Beginning →