Retro CRT monitor displaying HTML code — HTML basics tutorial

web-development · Basic · 2026-07-01

HTML Basics: Build Your First Web Page (Step by Step)

Learn HTML from scratch — what tags are, how a page is structured, and build your first web page in the live editor on this page.

HTML (HyperText Markup Language) is the language that gives every web page its structure. If a web page were a house, HTML would be the walls and rooms, CSS the paint and furniture, and JavaScript the electricity that makes things work.

What is an HTML tag?

An HTML tag is a keyword wrapped in angle brackets, like <p> for a paragraph. Most tags come in pairs — an opening tag <p> and a closing tag </p> — and the content goes between them:

<p>This is a paragraph.</p>

The basic structure of every page

Every HTML document follows the same skeleton:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title shown in the browser tab</title>
  </head>
  <body>
    <!-- Everything visible goes here -->
  </body>
</html>

<!DOCTYPE html> tells the browser this is a modern HTML5 page.
<head> holds information about the page (title, metadata).
<body> holds everything the visitor actually sees.

The tags you will use every day

Tag	What it does
`<h1>` to `<h6>`	Headings, from most to least important
`<p>`	Paragraph of text
`<a href="...">`	Link to another page
`<img src="...">`	Image
`<ul>` / `<ol>` / `<li>`	Bullet and numbered lists
`<div>`	Generic container for grouping content

Your first page, explained

The editor below already contains a small page: a heading (<h1>), a paragraph (<p>) and a bullet list (<ul> with <li> items). The CSS tab adds a font and colours the heading.

Try these challenges:

Change the heading text to your own name.
Add a second paragraph introducing yourself.
Add a fourth item to the list.
In the CSS tab, change the heading colour to crimson.

Press Run after each change to see the result instantly.

Practice exercises

Work through these in the editor below — each builds directly on the page you already have. Try before peeking at the solution.

Exercise 1 (easy): Below your bullet list, add a link to your favourite website using the <a> tag from the table above.

Solution:

<a href="https://cybercodelab.online">My favourite site</a>

Exercise 2 (medium): Add an image under the heading. Use https://placehold.co/300x150 as the src, and give it proper alt text.

Solution:

<img src="https://placehold.co/300x150" alt="A grey placeholder banner, 300 by 150 pixels">

Exercise 3 (challenge): Build an "About me" section at the bottom of the page: an <h2> heading, one paragraph, and an ordered list (<ol>) of three goals — a tag we mentioned but haven't used yet.

Solution:

<h2>About me</h2>
<p>I am learning web development at CyberCodeLab.</p>
<ol>
  <li>Finish the HTML basics tutorial</li>
  <li>Style my page with CSS</li>
  <li>Make it interactive with JavaScript</li>
</ol>

Practise what you learned

Edit the code below and press Run to see your changes live.

practice-editor

preview — press Run to refresh

Test yourself

Answer from memory first, then check yourself against the answer.

Q1What is the difference between the <head> and <body> sections?

The <head> holds information about the page — the title shown in the browser tab and metadata — none of which appears on the page itself. The <body> holds everything the visitor actually sees.

Q2Why do most HTML tags come in pairs?

The opening tag (like <p>) starts the element and the closing tag (</p>) ends it; the content lives between them. A few elements like <img> carry all their information in attributes, so they need no closing tag.

Q3Why should every <img> tag have alt text?

Alt text is read aloud by screen readers, displayed when the image fails to load, and used by search engines to understand the image — it makes your page accessible and better for SEO.