HTML markup

Last updated 17 June 2026 4 min

HTML (HyperText Markup Language) is the foundational language of the web. It's how every web page describes its content and structure to browsers, search engines, and AI crawlers. "Markup" refers to the tags — <p>, <h1>, <a>, <img> — that wrap content and tell the browser what each piece is.

How HTML works

HTML is a tree of elements. Each element has:

A tag that identifies it (e.g., <h1> for a top-level heading).
Optional attributes that modify it (e.g., <a href="..."> for a link's destination).
Content between the opening and closing tags.

<h1>Welcome to our site</h1>
<p>This is a <a href="/about">paragraph with a link</a>.</p>
<img src="logo.png" alt="Company logo">

A web browser parses this into a Document Object Model (DOM), applies CSS for styling and JavaScript for behaviour, and renders the result for users.

HTML page structure

Every standards-compliant HTML page has the same skeleton:

<!DOCTYPE html>
<html lang="en-AU">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <meta name="description" content="...">
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
</html>

<!DOCTYPE html> — declares the document as HTML5.
<html lang="..."> — the root element, with a language attribute.
<head> — invisible metadata: title, description, links to CSS, scripts, viewport settings.
<body> — everything visible on the page.

Semantic HTML

"Semantic" tags describe what content is, not just how it looks. The semantic elements introduced in HTML5 include:

<header> — top of a page or section.
<nav> — navigation menus.
<main> — the main content of the page (one per page).
<article> — self-contained content (a blog post, a product card).
<section> — a thematic grouping of content.
<aside> — sidebars, callouts, related links.
<footer> — bottom of a page or section.
<figure> and <figcaption> — images with captions.

Why semantic HTML matters

Modern search engines and browsers accept that not every website will be perfect. Minor errors and omissions can often be worked around, with the page still appearing to render correctly to users.

Despite this, semantic markup still matters because:

Screen readers use it to navigate and announce structure.
Search engines use it (alongside other signals) to understand content hierarchy and importance.
Developers can more easily read properly structured HTML, reducing unnecessary time spent deciphering sloppy markup.

Heading structure

Headings (<h1> through <h6>) define the document outline. Best practice:

One <h1> per page (typically the page's main title).
Nested logically — an <h2> after the <h1>, <h3> only inside an <h2> section.
Used for content structure, not visual styling. If something needs to look big but isn't a heading, style it with CSS, not a <h1> tag.

A good heading outline is a strong signal about a page's content.

Structured data

Beyond plain HTML, structured data (using Schema.org vocabulary) annotates content for search engines: products, articles, recipes, FAQs, events, organisations.

Properly implemented structured data can unlock rich results in search, like star ratings, prices, and FAQ accordions.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Blue Ceramic Mug",
  "offers": {
    "@type": "Offer",
    "price": "24.95",
    "priceCurrency": "AUD"
  }
}
</script>

Validity and rendering

While browsers can be a little forgiving when rendering HTML, invalid markup does cause problems:

Inconsistent rendering across different browsers.
Accessibility tools failing.
Search engines and AI crawlers misinterpreting the structure.

Some modern build tools and frameworks produce valid HTML by default, but this isn't universal. Server-rendered or hand-edited pages often drift outside strict validation standards; these are commonly an area for improvement.

Disclaimer: All information contained herein is for informational purposes only. It is not advice or instructional.