HTML Document Structure

Learn the essential building blocks of every HTML page.

What is the HTML Document Structure?

Every HTML page follows a specific structure that helps browsers understand and render content correctly. This structure includes required tags and rules for writing valid HTML.

  • Defines the start and end of the document
  • Organizes metadata and visible content
  • Ensures your page works across all browsers

HTML Document Structure Example

A basic HTML5 document with all required elements and a comment.

<!DOCTYPE html>(Document Type Declaration)

Declares the document type and HTML version. Must be the very first line. Tells the browser to use HTML5.

  • Required at the top of every HTML5 document.
  • Not case-sensitive, but usually uppercase.
  • Ensures standards mode rendering.

<html>(Root Element)

Wraps all content on the page. Everything goes inside this element.

  • Contains <head> and <body>.
  • Can include lang attribute for language (e.g., lang="en").

<head>(Metadata Section)

Contains metadata about the document (not shown on the page).

  • <title> – Sets the page title.
  • <meta> – Character set, viewport, description.
  • <link> – External resources like CSS.
  • <script> – JavaScript files.

<title>(Page Title)

Sets the text shown in the browser tab. Placed inside <head>.

  • Each page should have a unique title.
  • Important for SEO and accessibility.

<body>(Visible Content)

Contains all the visible content of the page – text, images, links, etc.

  • All user-facing content goes here.
  • Includes headings, paragraphs, images, lists, etc.

HTML Comments(Notes in Code)

Comments are ignored by browsers and help document your code.

  • Written as <!-- comment -->.
  • Useful for explanations and reminders.

Case Sensitivity(Tag & Attribute Names)

HTML tags and attribute names are case-insensitive, but lowercase is recommended.

  • <BODY> and <body> are the same.
  • Lowercase improves readability and consistency.

Whitespace Handling(Spaces, Tabs, Newlines)

Extra spaces, tabs, and newlines are collapsed by browsers. Use <br> or CSS for formatting.

  • <p>Hello world</p> renders as 'Hello world'.
  • Use <br> for line breaks.

Nesting Rules(Tag Order)

HTML elements must be properly nested. Tags must close in the reverse order they were opened.

  • <b><i>Text</i></b> is valid.
  • <b><i>Text</b></i> is invalid.

Valid vs Invalid HTML(Best Practices)

Browsers try to fix invalid HTML, but always write valid, well-formed code.

  • Use validators to check your code.
  • Properly close all tags.
  • Avoid deprecated elements.

Knowledge Check

1. Which tag is used to define the root of an HTML document?

2. Where should the <!DOCTYPE html> declaration appear?

3. How do you write a comment in HTML?

4. Which of the following is valid HTML?

PreviousNext