HTML Basics: The Elements Every Page Uses

9 minute read · Last updated 2026-10-31 · Written and reviewed by the Code.House editorial team

HTML is the layer that gives a page meaning. Browsers, screen readers, and search crawlers all read the same markup, and each one needs it to say what a thing is before anything can style it or speak it aloud. This guide covers the elements that make up the overwhelming majority of real pages, and the habits that keep markup usable.

The shape of a document

Every page follows the same skeleton. The <head> holds information about the document — character encoding, title, description, stylesheets. The <body> holds everything a visitor sees.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title shown in the browser tab</title>
  <meta name="description" content="One sentence about this page.">
</head>
<body>
  <h1>The main heading</h1>
  <p>A paragraph of text.</p>
</body>
</html>

Two of those lines are easy to skip and expensive to miss. lang="en" tells screen readers which pronunciation rules to use. The viewport meta tag tells phones to render at device width instead of pretending to be a 980-pixel desktop, and without it every mobile visitor sees a zoomed-out page.

Structure elements worth knowing

Generic <div> elements work, but they carry no meaning. These do:

Headings carry structure too. Use one <h1> for the page subject, then <h2> for major parts and <h3> beneath those. Do not pick a level because of how big the text looks — that is CSS's job. Screen reader users commonly navigate by jumping between headings, so a page with a sensible heading outline is dramatically faster for them to use.

Links, images and lists

Three elements do most of the day-to-day work:

<a href="/tools/">Browse the free tools</a>

<img src="chart.png" alt="Revenue rose from 12% to 31% between March and August">

<ul>
  <li>Unordered items</li>
  <li>where sequence does not matter</li>
</ul>

Link text should describe the destination on its own. "Click here" tells nobody anything, and a screen reader user pulling up a list of links on the page sees ten identical entries. For an image, alt should carry the information the image carries. A decorative flourish gets alt="" so assistive technology skips it; a chart gets a description of what it shows, not the file name.

Links that open a new tab deserve rel="noopener". Links to paid or sponsored destinations should carry rel="sponsored nofollow" — search engines ask for it, and advertising programmes expect it.

Forms without frustration

Forms are where most accessibility problems appear. The fix is nearly always the same: connect a real <label> to each field.

<form>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="budget">Budget</label>
  <select id="budget" name="budget">
    <option>Under $10,000</option>
    <option>$10,000 to $50,000</option>
  </select>

  <button type="submit">Send</button>
</form>

A placeholder is not a label: it vanishes the moment someone types, and low-contrast grey placeholder text fails readability guidelines. Setting type="email" or type="tel" gives phone users the right keyboard. autocomplete lets browsers fill known values, which measurably increases completion rates on long forms.

Validating what you wrote

Browsers repair broken markup silently, so a page can look fine and still be malformed. Run finished pages through the W3C validator, and check the browser's accessibility tree in developer tools. The most common real-world problems are short: missing alt, skipped heading levels, buttons built from <div> elements that keyboards cannot reach, and form fields with no label.

If you build an interactive control, reach for a real <button> first. It is focusable, it responds to Enter and Space, and it announces itself correctly — all behaviour you would otherwise have to rebuild by hand.

Common questions

How much HTML do I need before learning CSS?

Enough to build a page with headings, paragraphs, links, images, lists and a form — roughly the content of this guide. You will keep learning new elements for years, but that set covers the structure of most pages.

Are div elements bad?

No. They are the right choice when a wrapper exists purely for layout. The mistake is using them where a meaningful element exists, because then the structure is invisible to anything that is not a sighted mouse user.

Keep reading

Spotted something out of date? Send a correction — guides are revised rather than quietly deleted.