How HTML Works: From Server to Screen

Understand the journey of a webpage, from a simple text file on a server to a fully interactive site on your screen.

🌐

Welcome! Let's trace the journey of a webpage, from a simple request to a fully rendered site.

/* The journey begins... */

The Request & Response Cycle

When you type a URL, your browser sends a request to a server. The server finds the requested file (e.g., `index.html`) and sends it back as a response. This file is just plain text containing HTML code.

The Document's Skeleton

The browser reads the HTML from top to bottom. It looks for a basic structure: <!DOCTYPE html> to identify the document type, followed by <html> which wraps everything. This structure is the skeleton of the page.

Head vs. Body: The Two Halves

Inside <html>, the browser finds two key parts. The <head> contains metadata (like the page title). The <body> contains all the visible content—headings, paragraphs, images, etc. It's the difference between backstage and the main stage.

Rendering: From Code to Pixels

Finally, the browser uses the HTML tags to build a visual representation of the page. It converts the tags into a structure called the DOM (Document Object Model) and then "paints" the elements onto your screen according to their styles and layout.

Practice Zone

Interactive Test 1: Sort the Tags

Drag the tags to their correct container: <head> or <body>.

Arrastra en el orden correspondiente.


Arrastra las opciones:

<title>
<h1>
<p>
<meta>

Completa el código:

<head>______</head>
<body>______</body>
Unlock with Premium

Interactive Test 2: Build the Skeleton

Rellena los huecos en cada casilla.

<!DOCTYPE >
<>
  <head>...</head>
  <>
    ...
  </>
</>
Unlock with Premium

Practice Example: Code Editor

Create a complete, basic HTML document. It must include the doctype, html, head, title, and body tags.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> </body> </html>
Unlock with Premium

Knowledge Check

What is the main purpose of the HTML <body> tag?


Unlock with Premium

Bringing Your HTML to Life

HTML provides the structure, but its true power is unlocked when combined with CSS for styling and JavaScript for interactivity. Here’s how they connect.

1. The DOM: Your Page's Blueprint

The Document Object Model (DOM) is a tree-like representation of your HTML. JavaScript can access and manipulate this tree to change content, styles, and structure dynamically—no page reload required.

// JS finds the h1 and changes it
document.querySelector('h1')
  .textContent = 'Hello, DOM!';

Hello, DOM!

2. Linking CSS for Styling

To style your page, you link an external CSS file from the <head> section. The browser fetches this file and applies the rules to the matching elements in the DOM.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
body {
  background-color: #f0f8ff;
}

3. Adding Interactivity with JavaScript

JavaScript is usually added just before the closing </body> tag. This ensures the entire DOM is loaded before the script tries to interact with it, preventing errors.

<body>
  <button>Click Me</button>

  <script src="app.js"></script>
</body>
Practical Takeaway: HTML is the skeleton, CSS is the clothing, and JavaScript is the brain. Understanding how they connect through the DOM is the cornerstone of modern web development.

HTML Structure Glossary

<!DOCTYPE html>
The very first thing in your document. It tells the browser that the page is written in modern HTML5.
<html>
The root element that wraps all the content on the entire page.
<head>
A container for all the metadata (data about the page) that is not displayed on the page itself, like the title, character set, styles, and scripts.
<body>
Contains all the visible content of a webpage—headings, paragraphs, images, hyperlinks, tables, lists, etc.
<title>
Sets the title of the page, which appears in the browser tab and is important for search engine optimization (SEO).
<meta>
Provides metadata such as the character encoding (e.g., `UTF-8`), page description, keywords, and viewport settings for responsive design.
<h1> - <h6>
Heading tags used to define a hierarchy of titles and subtitles on a page, with <h1> being the most important.
<p>
The standard tag for paragraphs of text.