HTML Basic Structure

Every HTML web page follows a fixed basic structure. This structure acts as a template or blueprint that must be present in every HTML file. Understanding this structure is the first real step toward building web pages.

The Standard HTML Page Structure

Below is the standard structure of every HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title Here</title>
  </head>
  <body>

    <!-- All visible content goes here -->
    <h1>This is the Main Heading</h1>
    <p>This is a paragraph of text.</p>

  </body>
</html>

Understanding Each Part

1. <!DOCTYPE html>

This is the very first line in every HTML document. It is a declaration, not a tag. It tells the browser that this document is written in HTML5, the latest version of HTML.

Important: It does not have a closing tag and must always appear at the very top of the file.

<!DOCTYPE html>

2. <html> Tag

The <html> tag is called the root element. All other HTML tags must be placed inside this tag. The lang="en" attribute tells the browser the page is written in English.

<html lang="en">
  ...all content goes here...
</html>

3. <head> Tag

The <head> section contains information about the page that is not displayed on screen. This includes the page title, character encoding, linked stylesheets, and meta information.

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

4. <meta charset="UTF-8">

This tag defines the character encoding for the page. UTF-8 ensures the page can display all standard characters and symbols, including letters from non-English languages.

5. <meta name="viewport">

This tag makes the page look correct on mobile phones and tablets. Without it, the page may appear too zoomed out or too wide on small screens.

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

6. <title> Tag

The <title> tag sets the text shown in the browser tab. It also appears in search engine results as the clickable page name.

<title>Welcome to My Website</title>

7. <body> Tag

The <body> tag contains everything that is visible on the web page. All headings, paragraphs, images, links, tables, forms, and other content go inside the <body>.

<body>
  <h1>Welcome to HTML</h1>
  <p>This content is visible on the page.</p>
</body>

Visual Structure Overview

Section	Tag	Visible on Page?	Purpose
Document Declaration	`<!DOCTYPE html>`	No	Declares HTML5 version
Root Element	`<html>`	No	Wraps entire document
Head Section	`<head>`	No	Page information and metadata
Page Title	`<title>`	Browser tab only	Names the browser tab
Body Section	`<body>`	Yes	All visible page content

Complete Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
  </head>
  <body>
    <h1>About Me</h1>
    <p>My name is Alex. I am learning HTML from scratch.</p>
    <p>I enjoy reading and coding.</p>
  </body>
</html>

Key Points to Remember

Every HTML file must begin with <!DOCTYPE html>
The <html> tag wraps everything in the document
The <head> section holds page information — nothing inside it is visible on screen
The <body> section holds all visible page content
Every opening tag like <html> must have a matching closing tag </html>
Proper indentation makes the code easier to read and understand

Previous lessons

Back to courses

Next lessons