HTML basics: the structure of a web page

What HTML does

HTML (HyperText Markup Language) describes the structure and meaning of a page. Browsers read it and build what you see. CSS then styles it, and JavaScript makes it interactive.

A minimal page

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, web</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The doctype asks the browser for modern standards mode. head holds information about the page; body holds what visitors see. The lang attribute helps screen readers and search engines.

Headings, paragraphs, links and images

• h1 to h6: headings, in a sensible order. One h1 per page is a good habit.
• p: a paragraph.
• a href="...": a link. Write link text that makes sense on its own.
• img src="..." alt="...": an image. The alt text describes it for people who cannot see it.

Use elements for what they mean

Prefer header, nav, main, section, article and footer over a pile of divs. Meaningful structure helps accessibility, search engines and your future self.

Try it

1. Save the code above as index.html.
2. Open it in your browser.
3. Add a second heading, a link to another site and a list of three things you want to learn.

What next

CSS layout is next on the plan. It is not published yet.