HTML5 Introduction

HTML (HyperText Markup Language) is the standard language for creating web pages. Every website you’ve ever visited — Google, YouTube, Wikipedia — is built with HTML at its core. It’s not a programming language; it’s a markup language that tells the browser how to structure and display content.

What Does HTML Stand For?

Word	Meaning
Hyper	Beyond normal text — links that connect pages
Text	The content itself
Markup	Tags that annotate and structure the text
Language	A standardized set of rules

HTML uses tags (like <h1>, <p>, <img>) to wrap content and tell the browser: “this is a heading”, “this is a paragraph”, “this is an image.” The browser reads these tags and renders the page visually.

A Brief History

HTML has evolved significantly since its creation:

Year	Version	Key Changes
1991	HTML 1.0	Tim Berners-Lee creates HTML at CERN
1995	HTML 2.0	First official standard
1997	HTML 3.2	Tables, applets, text flow
1999	HTML 4.01	CSS support, scripting, accessibility
2000	XHTML 1.0	Stricter XML-based syntax
2014	HTML5	Audio, video, canvas, semantic elements, APIs
2017+	HTML Living Standard	Continuously updated by WHATWG

HTML5 is the version we use today, and it’s maintained as a living standard — meaning it’s continuously updated rather than versioned.

Note: When people say “HTML” today, they almost always mean HTML5. This tutorial covers HTML5 exclusively.

Your First HTML Document

Here’s the simplest valid HTML5 page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Let’s break down every line:

<!DOCTYPE html>          → Tells the browser this is an HTML5 document
<html lang="en">         → Root element; lang="en" sets the language to English
<head>                   → Contains metadata (not displayed on the page)
  <meta charset="UTF-8"> → Character encoding (supports all languages and emojis)
  <meta name="viewport"> → Makes the page responsive on mobile devices
  <title>My First Page</title> → Text shown in the browser tab
</head>
<body>                   → Contains all visible content
  <h1>Hello, World!</h1> → A main heading
  <p>This is my first web page.</p> → A paragraph
</body>
</html>

The HTML Document Tree

Every HTML document has a tree-like structure. The browser parses your HTML and builds a Document Object Model (DOM) tree:

<!DOCTYPE html>
│
└── <html>
    ├── <head>
    │   ├── <meta charset="UTF-8">
    │   ├── <meta name="viewport">
    │   └── <title>My First Page</title>
    │
    └── <body>
        ├── <h1>Hello, World!</h1>
        └── <p>This is my first web page.</p>

Think of it like a family tree — <html> is the root, <head> and <body> are its children, and everything inside them are grandchildren.

How HTML Works

The process from writing HTML to seeing a web page is straightforward:

  You write          Browser            Browser           You see
  HTML code    →    downloads    →     parses &     →    the rendered
  (.html file)      the file          builds DOM         web page

1. You write HTML in a text editor and save it as a .html file
2. You open the file in a browser (or a web server sends it to the browser)
3. The browser reads the HTML tags and builds the DOM tree
4. The browser renders the page visually on screen

Try It Yourself

Create a file called index.html on your computer with this content:

<!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 [Your Name] and I'm learning HTML!</p>
    <p>HTML is the foundation of every website on the internet.</p>
</body>
</html>

Double-click the file to open it in your browser. You should see your heading and paragraphs rendered on the page.

Tip: Right-click on any web page and select “View Page Source” to see the HTML behind it. Every website is just HTML, CSS, and JavaScript.

What’s Next?

Now that you understand what HTML is and have seen your first HTML document, let’s set up a proper code editor so you can write HTML efficiently.

Next: HTML Editors →