HTML (HyperText Markup Language) describes the structure and meaning of a web page. You write a text file; the browser reads the markup and displays the content. Your first goal is to understand this edit–save–refresh cycle.

See how it works

Learn through worked examples

Follow one sentence from source to screen

Suppose you type a heading in VS Code. Before saving, it exists only in the editor's current buffer. Saving writes it to the file. Opening or refreshing that file asks the browser to read it. The parser recognises the h1 tag and creates a heading node. The browser applies default heading styles, calculates its position, and draws the text. Editing a file does not automatically update a normal file tab; refresh after saving.

The browser is an interpreter of HTML structure, rather than a Java compiler. There is no javac step, class file, or main method. An HTML document is the input. JavaScript, when present, is a different language executed by the browser.

Example 1 — source is different from output

Save this inside the body of the standard document shown later.

<h1>My learning page</h1>
<p>Hello, Asha!</p>

Why this happens: The tags tell the browser how to interpret content. They are not printed. The h1 is a heading; p starts a paragraph.

Example 2 — whitespace is not a page layout tool

Predict the number of visible spaces before running this.

<p>Hello     Asha!</p>
<p>Hello
Asha!</p>

Why this happens: In normal text flow, runs of ordinary spaces and newlines collapse. The two p elements still create separate paragraphs. Use CSS for spacing, rather than repeatedly pressing the spacebar.

A reliable debugging routine

1. Check the filename and extension.
2. Save, refresh, and confirm the browser URL points to the right file.
3. Inspect the element and compare its text with your editor.
4. Make one small change at a time; this helps identify which change caused an error.

Understand the topic

A web page commonly combines three languages: HTML describes content, CSS controls presentation, and JavaScript adds behavior. A heading is HTML; its color is CSS; reacting to a button click is usually JavaScript. You can create a useful page using HTML alone.

A browser parses your document into a tree called the DOM (Document Object Model). Nested elements become parents and children in that tree. The browser then lays out and paints the visible content. It does not display the markup tags themselves.

For a local file, the address starts with file:. On a website, the browser requests an address using HTTP or HTTPS, and a server returns the document. Opening a file locally is enough for these initial exercises; it does not publish your page on the internet.

1. Install a text editor such as VS Code and use a browser such as Chrome, Edge, or Firefox.
2. Enable visible file extensions in your file manager. The filename must be index.html, rather than index.html.txt.
3. Use the browser's Inspect command to see the DOM in the Elements/Inspector panel. Use View Page Source to see the original file.

Run the example

1. Create a folder named html-practice and open it in VS Code.
2. Create index.html, paste the complete example, and save it.
3. Open the file in your browser. After an edit, save and refresh the browser.

These examples run without a framework or database. An HTML form can show and validate fields locally; storing submissions requires a server.

Complete working example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first HTML page</title>
</head>
<body>
  <h1>Welcome to Edupoly</h1>
  <p>I am learning to build web applications.</p>
  <p>HTML gives this page its structure.</p>
</body>
</html>

Working browser output

This is the complete example running in an isolated preview. Use its controls and compare the result with the source above.

Open the complete example in a separate tab

What you should see

The browser tab reads “My first HTML page”. The page shows one large heading and two paragraphs. Change the heading, save the file, and refresh: the displayed text should change.

Common mistakes and how to fix them

If the browser displays your tags as plain text, check the extension and open the HTML file rather than a text preview. If changes do not appear, save the file and confirm you opened the same folder's file. HTML is forgiving of some errors, so a page that appears to work still needs correct markup.

Try it yourself

Create a personal introduction with your name as the main heading and three paragraphs about your interests. Explain, in your own words, the roles of HTML, CSS, and JavaScript. Inspect your heading in the browser and locate the corresponding element.

Reference: Basic HTML syntax — MDN.