01 | WHAT ARE YOU BUILDING?

Every web page needs content and structure. HTML HyperText Markup Language describes that structure. It tells a browser which text is a heading, which text is a paragraph, and where other content belongs.

Think of a page as a well-organized document. HTML labels the parts. CSS will control their appearance, and JavaScript can add behaviour. In this first lesson, focus on giving a short page a sensible structure.

HTML is a markup language, rather than a programming language for calculations and decision-making. A browser reads the markup and renders the page you see.

02 | YOUR FIRST ELEMENT

<p>I am learning HTML.</p>

The browser displays “I am learning HTML.” as a paragraph. The markup itself is not shown as ordinary page text.

Most elements have an opening and a closing tag. The slash in the closing tag matters. Some elements, such as <meta>, are void elements and do not have closing tags.

You can put elements inside other elements. Close nested elements in the reverse order to opening them:

<p>I am building <strong>my first page</strong>.</p>

03 | THE COMPLETE DOCUMENT

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My first website</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>I am learning to build web pages.</p>
</body>
</html>

The indentation makes the structure easier for people to read. It is not what makes the heading larger the <h1> element has meaning and browsers provide default styles.

Follow the nesting: the document has an outer <html> element, containing <head> followed by <body>. The heading and paragraph belong inside the body.

04 | WHAT EACH PART DOES

Head is not heading: <head> contains document information, while <h1> is a heading in the body. Changing the title changes the tab label; changing the h1 changes the visible heading.

The title is not unimportant simply because it is outside the body. It helps users identify tabs and bookmarks.

05 | ATTRIBUTES ADD INFORMATION

<html lang="en">

An attribute gives extra information about an element. It usually appears in the opening tag as a name and value. In this example, lang is the attribute name and en is its value.

Use straight quotation marks around attribute values. Follow the examples exactly at first; formatting your code consistently makes mistakes easier to spot.

A common beginner mistake is to think the language attribute translates the text. It does not: it identifies the language of the content for browsers and assistive technologies.

06 | CREATE AND OPEN THE FILE

1. Create a folder called first-website.
2. Open a plain-text code editor. Create a new file and paste the complete document above.
3. Save it inside your folder as index.html. Check that it is not called index.html.txt.
4. Open the file in a web browser for example, by using the browser’s Open File option.
5. Change the h1 text in your editor, save the file, and refresh the browser.

You do not need hosting, a database or a server to view this simple local HTML file. Opening it on your computer does not publish it online.

Use plain text, not a word processor document. Rich-text formatting and “smart quotes” can introduce characters you did not intend. If the browser shows your code as text, check the file extension and that the file was saved as plain text.

07 | TRY IT: EDIT AND PREVIEW

Change the tab title, heading and paragraph below, then select Run preview. This preview supports basic HTML only; scripts, external resources and navigation are blocked.

Edits stay while this page is open. Copy your finished code into your own index.html file to keep it.

08 | FIX COMMON MISTAKES

Browsers often try to recover from malformed HTML. A page looking acceptable does not prove the markup is correct. Develop good habits: use a complete document, tidy indentation and correctly nested elements.

Further reading: MDN: creating HTML content.