HTML5 Fundamentals

What is HTML & How the Web Works

25 min Lesson 1 of 18

What Does HTML Stand For?

HTML stands for HyperText Markup Language. Let us break that down: HyperText means text that links to other text -- the clickable links you use every day. Markup means you annotate content with tags to give it structure. Language means it follows a defined set of rules that browsers understand. HTML is not a programming language; it is a markup language that describes the structure and content of web pages.

A Brief History of HTML

HTML was created by Tim Berners-Lee in 1991 at CERN. Here are the major milestones:

HTML 1.0 (1991) -- The original version with basic tags for headings, paragraphs, and links.
HTML 2.0 (1995) -- Standardized by the IETF, adding forms and tables.
HTML 3.2 (1997) -- Introduced by the W3C with support for scripts and applets.
HTML 4.01 (1999) -- Added stylesheets, scripting improvements, and accessibility features.
HTML5 (2014) -- The modern standard with semantic elements, audio, video, canvas, and APIs. This is what we use today.

How the Web Works: Client-Server Model

Every time you visit a website, a conversation happens between two computers. Your computer (the client) sends a request, and a remote computer (the server) sends back a response. This follows the HTTP (HyperText Transfer Protocol) standard.

Here is the simplified flow:

You type a URL into your browser (e.g., https://example.com).
Your browser sends an HTTP request to the server at that address.
The server processes the request and sends back an HTTP response containing HTML, CSS, and JavaScript files.
Your browser reads the HTML, applies CSS for styling, runs JavaScript for interactivity, and renders the page on your screen.

Example: A Simple HTTP Request and Response

Request:
GET /index.html HTTP/1.1
Host: example.com

Response:
HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>

What Does the Browser Actually Do?

When your browser receives an HTML file, it goes through these steps:

Parsing -- It reads the HTML code and builds a DOM (Document Object Model) tree.
Rendering -- It combines the DOM with CSS rules to calculate layout and paint pixels on screen.
Scripting -- It executes any JavaScript code to add dynamic behavior.

Think of HTML as the skeleton, CSS as the skin and clothing, and JavaScript as the muscles and brain.

HTML vs CSS vs JavaScript

These three technologies work together but serve very different purposes:

HTML -- Defines the structure and content (headings, paragraphs, images, links).
CSS -- Controls the visual presentation (colors, fonts, layout, spacing).
JavaScript -- Adds interactivity and dynamic behavior (animations, form validation, data fetching).

Example: HTML Provides Structure

<h1>My Website</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>

Example: CSS Adds Style

<style>
  h1 { color: navy; font-size: 32px; }
  p { line-height: 1.6; }
</style>

Example: JavaScript Adds Behavior

<script>
  document.querySelector("h1").addEventListener("click", function() {
    alert("You clicked the heading!");
  });
</script>

The Concept of Markup

In HTML, you wrap content in tags to tell the browser what that content represents. Tags come in pairs: an opening tag and a closing tag. The content between them is the element.

Example: Your First HTML Page -- Hello World

<!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 very first web page.</p>
</body>
</html>

Note: The <!DOCTYPE html> declaration tells the browser this is an HTML5 document. Always include it at the very top of every HTML file.

Pro Tip: You do not need to memorize every HTML tag right away. Focus on understanding the concept of tags and structure first. The specific tags will become second nature with practice.

Common Mistake: Forgetting to close tags. Every opening tag like <p> needs a corresponding closing tag </p>. Unclosed tags can cause unpredictable rendering across different browsers.

Practice Exercise

Open any website you visit frequently, right-click on the page, and select "View Page Source." Scroll through the HTML code. Can you identify the <html>, <head>, and <body> tags? Notice how the content you see on screen is wrapped in various HTML tags. This is the foundation of every web page you have ever visited.