HTML Basics: A Beginner’s Guide to How Web Pages Work

Every website you’ve ever visited — from Google to a local bakery’s WordPress site — is delivered to your browser as HTML. You don’t need to become a developer to run a website, but understanding the basics of HTML makes you far better at SEO, at briefing developers, and at fixing the small problems that page builders create. This guide explains how web pages work, in plain English, with examples you can try.

What happens when you open a web page?#

1. You request a URL. Your browser asks DNS which server hosts the domain, then sends an HTTP request to that server.
2. The server responds with HTML. For WordPress, PHP builds the HTML on the fly from your theme and database (or serves a cached copy).
3. The browser parses the HTML into a tree called the DOM, discovering links to CSS, JavaScript, images and fonts along the way.
4. CSS is applied to decide colours, sizes and layout.
5. JavaScript runs to add interactivity — menus, sliders, forms, chat widgets.
6. The page is painted on screen, and updated as more resources arrive.

Search engines follow a very similar process. Googlebot fetches the HTML, renders it with a Chromium-based browser and reads the result. That’s why HTML quality directly affects SEO.

The anatomy of an HTML element#

<a href="https://iftikhar.in/seo-library/" title="Browse SEO terms">SEO Library</a>

• <a> is the opening tag — this one creates a link.
• href and title are attributes that add information.
• SEO Library is the content (here, the anchor text).
• </a> is the closing tag.

Some elements, like <img>, <br> and <meta>, are void elements with no closing tag.

A minimal, correct HTML page#

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fresh Bakes | Bandra Bakery</title>
  <meta name="description" content="Handmade breads and cakes baked daily in Bandra, Mumbai.">
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <header><a href="/">Bandra Bakery</a></header>
  <main>
    <h1>Fresh bread, baked every morning</h1>
    <p>We open at 7am. <a href="/menu/">See today’s menu</a>.</p>
    <img src="/sourdough.webp" alt="Sourdough loaf on a wooden board" width="800" height="533">
  </main>
  <footer>© 2026 Bandra Bakery</footer>
</body>
</html>

Notice the two halves. The <head> contains information about the page — character set, title, description, stylesheets. The <body> contains what visitors actually see.

The elements you’ll use most#

Using elements for their real meaning is called semantic HTML. Read more in Semantic HTML: why the right tags matter.

HTML, CSS and JavaScript: who does what?#

A good rule: content that matters for SEO should be in the HTML, not added later by JavaScript.

How to see the HTML of any page#

• View source (Ctrl+U / Cmd+Option+U) shows the raw HTML the server sent — what crawlers see first.
• Inspect element (right-click → Inspect) shows the live DOM after JavaScript ran, and lets you experiment with CSS.
• In WordPress, switch a block to “Edit as HTML” or use a Custom HTML block to see and edit the markup of a section.

Common HTML mistakes on business websites#

• Several <h1> tags used for styling, or headings skipped for font size.
• Images without alt text or dimensions, causing accessibility issues and layout shift.
• Links built with <div onclick> that crawlers and keyboards can’t follow.
• Text placed inside images, so it can’t be read by search engines or translated.
• Missing lang attribute and viewport meta tag.

Most of these are easy to catch with an HTML validator — see how to validate HTML — and a quick accessibility check.

Where to go next#

Once you’re comfortable reading HTML, learn what belongs in the page head (HTML head tags guide), how to make images responsive (responsive images) and how links work in depth (HTML links guide). These three topics alone fix most on-page technical SEO issues I see in audits.