Basic

In this lesson you will learn about the basic structure of an HTML document. Every HTML page follows the same skeleton — once you understand it, everything else becomes easy.

A Basic HTML Document

Below is a complete, minimal HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First HTML Page</title>
</head>
<body>

    <h1>Hello, World!</h1>
    <p>Welcome to my first HTML page.</p>

</body>
</html>

HTML Document Structure Explained

1. <!DOCTYPE html>

The <!DOCTYPE html> declaration must be the very first line of every HTML document.

It tells the browser that this is an HTML5 document
It is not an HTML tag — it is an instruction to the browser
It is not case sensitive — <!DOCTYPE html> and <!doctype html> are both valid

<!DOCTYPE html>

2. <html> — The Root Element

The <html> element is the root of every HTML page. All other elements must be inside it.

The lang attribute declares the language of the page (e.g. lang="en" for English)
This helps browsers and search engines understand the page language

<html lang="en">
    ...
</html>

3. <head> — Page Information

The <head> element contains meta-information about the page — things that are not visible on the page itself.

Tag	Purpose
`<title>`	Sets the tab/window title shown in the browser
`<meta charset="UTF-8">`	Sets character encoding to support all languages
`<meta name="description">`	Describes the page for search engines
`<link>`	Links external CSS stylesheets
`<script>`	Links or embeds JavaScript

4. <body> — Visible Page Content

The <body> element contains everything that is visible on the page:

Headings — <h1> to <h6>
Paragraphs — <p>
Images — <img>
Links — <a>
Tables — <table>
Lists — <ul>, <ol>
And much more...

HTML Headings

HTML has six levels of headings — <h1> is the largest and <h6> is the smallest:

<h1>Heading 1 — Largest</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 — Smallest</h6>

Note: Always use only one <h1> per page. It represents the main topic of the page and is important for SEO.

HTML Paragraphs

A paragraph is defined with the <p> tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Browsers automatically add some spacing before and after each paragraph.

HTML Links

Links are defined with the <a> tag. The destination URL is set using the href attribute:

<a href="https://www.example.com">Visit Example</a>

The href stands for Hypertext REFerence — it specifies where the link goes.

HTML Images

Images are embedded using the <img> tag. It is a self-closing tag (no end tag needed):

<img src="image.jpg" alt="Description of image">

Attribute	Purpose
`src`	Specifies the path/URL of the image
`alt`	Alternative text shown if image fails to load (also used by screen readers)
`width`	Sets the width of the image
`height`	Sets the height of the image

How to View HTML Source

You can view the raw HTML code of any webpage:

In Chrome or Edge: press Ctrl + U (Windows) or Cmd + U (Mac)
Right-click on the page and choose View Page Source
Press F12 to open DevTools and inspect elements

Practice: Open any website, press Ctrl + U, and study the HTML structure. This is one of the best ways to learn!

« Previous Lesson Next Lesson »