Skip to content

HTML Basics: Write Your First Web Page (Free Lesson with Live Editor)

Every website you have ever opened, from a government portal to a shop, is built on HTML. HTML (HyperText Markup Language) is not a programming language: it does not calculate anything. It describes what each part of a page is, such as a heading, a paragraph, a link or an image, so the browser knows how to show it and search engines and screen readers know what it means. In this lesson you write a complete page and see it appear as you type.

Quick answer

An HTML page is a text file of elements. Each element is usually an opening tag, content and a closing tag, like <p>Hello</p>. A full page starts with <!DOCTYPE html>, then an <html> element holding a <head> (information about the page, such as its title) and a <body> (everything the visitor sees).

15 min read and practice · Content checked on 20 October 2026

In this lesson you will

  • Explain what HTML does and what it does not do
  • Write a valid page skeleton from memory
  • Tell elements, tags and attributes apart

Elements, tags and attributes

A tag is the text in angle brackets. <p> opens a paragraph and </p> closes it; the closing tag has a slash. The opening tag, the content and the closing tag together make an element. Elements can sit inside other elements, which is called nesting: <p>This is <strong>important</strong>.</p> puts a strong element inside a paragraph.

Some elements have no content and no closing tag. They are called void elements; <br> (a line break), <img> (an image) and <meta> are common ones. You may see them written as <br /> in older code: the slash is allowed but does nothing in HTML.

Attributes add extra information to an element. They go inside the opening tag as name="value". For example <a href="https://needmytools.com"> tells a link where to go, and <html lang="en"> tells the browser the page is in English. Always put attribute values in quotes; it avoids bugs when a value contains a space.

Try it: Elements, nesting and an attribute
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Change the text between the tags and watch the result update. Clicking the link in the preview is logged in the console instead of leaving the page.

The page skeleton

<!DOCTYPE html> must be the first line. It is not an element; it tells the browser to use standards mode. Without it, browsers fall back to "quirks mode", which copies old browser bugs and can break your layout in ways that are hard to find.

Next comes <html>, the root that wraps everything. Inside it, <head> holds information for the browser and search engines: the character encoding <meta charset="utf-8">, the <title> shown on the browser tab and in search results, and later your styles. <body> holds the content people actually see.

The lang attribute on <html> matters more than it looks. Screen readers use it to pick the right voice and pronunciation, and browsers use it for hyphenation and translation offers. For an Arabic page you write <html lang="ar" dir="rtl">; the dir attribute makes text and layout run right to left.

Try it: A complete, valid page
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Try changing lang="en" to lang="ar" dir="rtl" and type an Arabic sentence in the paragraph.

How the browser reads your file

When you open a page, the browser downloads the HTML text and parses it into a tree of objects called the DOM (Document Object Model). CSS then styles that tree and JavaScript can change it. That is why correct nesting matters: the tree is built from how your tags open and close.

HTML parsers are forgiving. If you forget a closing tag, the browser guesses where it should go and keeps going instead of showing an error. That is helpful for visitors but dangerous for you, because a page can look fine in one place and break in another. A validator such as the W3C Nu checker shows the mistakes the browser silently fixed.

Save a page as a file ending in .html (for example index.html) and open it in any browser; no server or install is needed. Use a plain text or code editor, not a word processor, because word processors add hidden formatting.

Common mistakes

  • Closing tags in the wrong order

    <p><strong>Hi</p></strong> overlaps two elements. Close the inner one first: <p><strong>Hi</strong></p>. Think of it as boxes inside boxes.

  • Leaving out the doctype or charset

    Without <!DOCTYPE html> the page runs in quirks mode, and without <meta charset="utf-8"> Arabic text and symbols can turn into strange characters. Put both in every page.

  • Putting visible content in the head

    Headings and paragraphs belong in <body>. Only information about the page, such as <title> and <meta>, goes in <head>.

Exercise

Turn the starter into a complete page: add the doctype, an html element with lang="en", a head with a charset and a title, and a body with one h1 and one paragraph about yourself.

Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.
  • The html element has a lang attribute
  • The head has <meta charset="utf-8">
  • The head has a title with text
  • The body has an h1 heading
  • The body has a paragraph with text
Show one possible solution
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>About me</title>
  </head>
  <body>
    <h1>About me</h1>
    <p>I am learning HTML on NeedMyTools.</p>
  </body>
</html>

Quick quiz

  1. 1. What is HTML used for?
  2. 2. Which line must come first in an HTML page?
  3. 3. Where does the text shown on the browser tab come from?
  4. 4. In <a href="/contact">Contact</a>, what is href?
Answer every question to check.

Finished the lesson?

Questions people ask

Is HTML a programming language?

No. HTML is a markup language: it labels content but has no variables, conditions or loops. You add logic with JavaScript, and many people still call writing HTML "coding" in everyday speech.

What software do I need to start writing HTML?

Only a browser and a text editor. The editor on this page is enough to learn. When you work on files, free editors such as Visual Studio Code add colour, autocomplete and error hints.

Are HTML tags case-sensitive?

No, <P> and <p> work the same in HTML. Lowercase is the common convention and is what most style guides and tools expect, so use lowercase.

What is the difference between HTML and HTML5?

HTML5 was the name of a major version. Today HTML is a "living standard" maintained by WHATWG and updated continuously, so there is no HTML6 to wait for. When people say HTML5 they usually mean modern HTML.

How long does it take to learn HTML?

The basics in this course take a few evenings: about two hours of reading plus practice. Writing clean, accessible HTML well takes longer and comes from building real pages, which is what the exercises are for.

Sources

Facts in this lesson were checked against these official pages on 20 October 2026.

Code examples stay in English and run in a sandbox on your device. Arabic text is pending native review. If you spot a mistake, tell us through the contact page.