Build your first HTML page

One idea at a time

HTML means HyperText Markup Language. It describes the meaning and structure of a page. A heading introduces a topic; a paragraph contains a piece of writing. The browser reads these instructions and displays the content. HTML does not decide every visual detail: we will use CSS for that later.

An attribute adds information inside an opening tag: in lang='en', lang is its name and en is its value. An element usually has an opening tag, some content, and a closing tag. In <p>Hello!</p>, p means paragraph. The slash marks the closing tag. Tags are instructions, so the browser shows Hello! without showing the tags around it.

A document has two main areas. The head contains information about the page, such as the browser-tab title. The body contains the content visitors read. An h1 is the main heading in the page itself; it is different from the title in the head.

Meet the tags in your first document

Walk through an example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My learning notebook</title>
  </head>
  <body>
    <h1>Hello, web!</h1>
    <p>I am learning how pages work.</p>
  </body>
</html>

The doctype asks the browser to use modern HTML rules. The html element wraps the document; lang="en" describes its language. The character setting supports text such as accented letters. The viewport setting helps mobile browsers use the device width. Notice that meta has no closing tag: it is a void element. The browser tab reads My learning notebook, while the page displays Hello, web! above a paragraph.

See it happen: try a small change

<title>My notebook</title>
<h1>Hello, web!</h1>
<p>Today I made a page.</p>

Tags describe the text between them

In <p>Hello!</p>, the opening tag starts a paragraph, Hello! is its content, and the closing tag ends it. Together they form an element. Keep both tags when you change the words. A tag is part of an element, not another name for the whole thing.

A new line in your editor usually becomes an ordinary space in the page. To start a new paragraph, use another p element. br is a void element: write <br> with no closing tag. Use br only when a line break belongs to the content, such as lines of an address; it is not a tool for adding page spacing.

<p>I grow basil.
I water it each morning.</p>

Next, use the file-creation steps below to try these changes in your own document.

Create, save, and open your HTML file

You only need a browser and a plain-text editor for this lesson. A plain-text editor saves the characters you type without word-processor formatting. This first page uses just one file: index.html.

• Create a folder named my-first-page somewhere you can find it again.
• Open your plain-text editor and create a new file. Copy the complete HTML example above, from the doctype through the closing html tag.
• Save it inside my-first-page with the name index.html. If the editor offers a file type, choose HTML or All files so it does not add .txt.
• Find index.html in your file manager and double-click it. If it opens in an editor, use Open with and choose your browser.
• Check that the browser tab says My learning notebook and the page shows Hello, web! followed by a paragraph.

The address starts with file: because the browser is reading a file on your computer. Your page is not published online. Keep the same file open in your editor and browser: the editor changes the instructions, and the browser displays the result.

Change Hello, web! inside h1 to your own greeting. Save in the editor, then refresh the browser. You should see the new greeting. If you do not, check that you saved and that both windows are using the same file. Plain text and default browser styling are exactly what we expect at this stage.

A common wrong turn

Saving the file as index.html.txt makes it a text file instead of an HTML page. Check the actual extension in your file manager. Also keep the visible heading inside body. Browsers sometimes repair incorrect markup, so a page that looks acceptable is not proof that its structure is correct.

Change one thing

Change only the title, save, and refresh. Look at the browser tab. Then change only the h1 and refresh again. Comparing the two results makes the difference easier to remember. Blank lines in the source make it easier to read, but they do not create blank paragraphs in the page.

Go to the source

• MDN: explore this topic ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.