🌐 Phase 1 · Web Foundations 🟢 Beginner Module 01

Introduction to HTML

⏱ 18 min read 📖 6 sections 🧩 5-question quiz 🏆 1 challenge

Course Progress6% complete

HTML — HyperText Markup Language — is the skeleton of every webpage. Without HTML there is nothing to style, nothing to script, nothing to display. In this lesson you'll learn exactly what HTML is, where it came from, how tags work, and write your very first HTML document from scratch.

Section 1

What is HTML?

HTML stands for HyperText Markup Language. Let's break that down:

🔗

HyperText

Text that contains links to other text — the hyperlinks that connect the web together.

🏷️

Markup

Tags that annotate content, telling the browser what each piece of text means and how to display it.

📝

Language

A formal set of rules and syntax — not a programming language, but a description language for structure.

HTML is not a programming language — it doesn't have variables, loops, or logic. It's a markup language that describes the structure and meaning of content. Think of it as giving content a label: "this is a heading", "this is a paragraph", "this is a link".

💡

HTML = Structure. CSS = Style. JS = Behaviour.

These three technologies are always used together. HTML decides what is on the page. CSS decides how it looks. JavaScript decides what it does when a user interacts with it.

Section 2

A Brief History of HTML

HTML was invented by Tim Berners-Lee at CERN in 1991. He needed a way to share research documents over a network — and HTML was born. Here's the quick timeline:

🧪

HTML 1.0 — 1991

18 tags. No images, no tables, no forms. Just headings, paragraphs and links.

🖼️

HTML 2.0 — 1995

Added forms, image support, and tables. The first official standard.

🎨

HTML 4.01 — 1999

Introduced stylesheets (CSS), scripting, and better accessibility support.

🚀

HTML5 — 2014

The modern standard. Adds video, audio, canvas, semantic tags and APIs without plugins.

🎭

Tim Berners-Lee wrote the first webpage on Christmas Day

The very first website — info.cern.ch — went live on December 20, 1990. It had no images, no colour, just text and links. You can still visit an archived version of it today.

Section 3

Anatomy of an HTML Tag

Everything in HTML is built from tags. A tag is a keyword wrapped in angle brackets. Tags usually come in pairs: an opening tag and a closing tag. The content goes between them, forming an element.

ANATOMY OF AN HTML ELEMENT

<a href="https://bitwithbite.com">Visit BitWithBite</a>

Opening & closing angle brackets

Tag name (element type)

Attribute name

Attribute value

Content

Key terminology

Term	What it means	Example
Tag	The keyword in angle brackets	`<p>`
Element	Opening tag + content + closing tag	`<p>Hello</p>`
Attribute	Extra info added to an opening tag	`href="..."`
Value	The data assigned to an attribute	`"https://..."`
Self-closing	Tags with no closing tag needed	`<img>`, `<br>`
Nesting	Elements inside other elements	`<p><strong>Bold</strong></p>`

⚠️

Always close your tags

Browsers are forgiving — they'll often render unclosed tags. But this leads to unpredictable behaviour, especially in nested layouts. Get into the habit of closing every tag immediately after opening it.

Section 4

Your First HTML Document

Every HTML file follows the same skeleton. Here's the minimal structure every HTML document must have:

HTMLMinimal HTML Document

<!-- This tells the browser we're using HTML5 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
</head>

<body>
  <h1>Hello, World!</h1>
  <p>This is my first HTML page.</p>
</body>

</html>

Let's explain each part:

<!DOCTYPE html>

Not a tag — a declaration. Tells the browser to use HTML5 standards mode. Always the very first line.

<html lang="en">

The root element. Everything wraps inside this. The lang attribute tells search engines and screen readers what language the page is in.

<head>

Contains metadata — information about the page, not visible content. Title, character set, stylesheets, and more go here.

<meta charset="UTF-8">

Tells the browser which character encoding to use. UTF-8 supports every character in every language, including emojis.

<title>

Sets the text shown in the browser tab and search engine results. Every page needs a unique, descriptive title.

<body>

All visible content goes here — headings, paragraphs, images, buttons, everything the user sees on the page.

Section 5

HTML5 — The Modern Standard

HTML5 (the current version) was a major overhaul that added powerful new capabilities. The key improvements over older HTML:

🎬

Native Media

Built-in <video> and <audio> tags — no Flash plugin required.

🏗️

Semantic Tags

<article>, <section>, <nav> — meaningful structure for accessibility and SEO.

🎨

Canvas & SVG

Draw 2D/3D graphics directly in the browser without external tools.

📦

Local Storage

Store data in the browser — like remember-me checkboxes or draft content.

🔍

HTML is a living standard

HTML5 is maintained by WHATWG (Web Hypertext Application Technology Working Group) as a "living standard" — it's continuously updated. There won't be an "HTML6" — features are added incrementally. Check caniuse.com to see browser support for any feature.

Section 6

HTML, CSS & JavaScript Together

In a real webpage, three languages work as a team. Here's how they divide responsibilities:

Language	Role	Analogy	Example
HTML	Structure & content	The skeleton of a building	`<button>Click me</button>`
CSS	Style & layout	The paint, furniture, and decor	`button { background: red; }`
JavaScript	Interactivity & logic	The electrical wiring and plumbing	`button.onclick = () => alert('Hi!')`

HTMLAll Three Together

<!DOCTYPE html>
<html lang="en">
<head>
  <style>  /* CSS — styles the button */
    button { background: #ef4444; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; }
  </style>
</head>
<body>
  <!-- HTML — the structure -->
  <h1>Counter</h1>
  <p id="count">0</p>
  <button onclick="increment()">Click me</button>

  <script>  // JavaScript — the logic
    let n = 0;
    function increment() { document.getElementById('count').textContent = ++n; }
  </script>
</body>
</html>

✅

Write HTML first, always

Good developers build the HTML structure before adding any CSS or JavaScript. The HTML should make sense even without styling — accessible, semantic, and well-ordered. Styling and scripting are enhancements, not a replacement for good structure.

🧩 Quick Check — Lesson 2

5 questions · instant feedback · no penalty for wrong answers

1. What does HTML stand for?

2. Who invented HTML?

3. What is the role of HTML in a webpage?

4. What is an HTML "element"?

5. Which of the following is a self-closing HTML tag?

🏆

Quiz Complete!

Great — you understand what HTML is. Let's set up your coding environment next!

🏆

Lesson 2 Challenge

Code exercise · 10 min · no setup needed

Write an HTML document from memory.

Open any text editor (Notepad, TextEdit, VS Code) and write an HTML file that includes:

1. The correct DOCTYPE declaration
2. An <html> element with the lang attribute set to "en"
3. A <head> section with: a charset meta tag, a viewport meta tag, and a title
4. A <body> section with: one <h1> heading and two <p> paragraphs

Save the file as index.html and open it in a browser. Can you see your content?

Show hints

DOCTYPE goes on line 1, before anything else
The html tag wraps everything: <html lang="en">...</html>
Meta tags are self-closing (no closing tag needed)
Double-click the saved .html file to open it in your browser

← How Websites Work

Lesson 2 of 35HTML Fundamentals

Setting Up Environment →