HTML is the foundation of every web page. Yet despite being the most fundamental web technology, many developers — including experienced ones — write HTML that undermines their SEO, creates accessibility barriers, and slows down their pages. This guide covers the HTML best practices that Google, screen readers, and your users all reward with better rankings, more engagement, and faster load times.

1. Always Start with a Valid DOCTYPE

Every HTML5 document must begin with the <!DOCTYPE html> declaration. This tells the browser to render the page in standards mode rather than quirks mode, which ensures consistent rendering across all modern browsers. Quirks mode exists only for backward compatibility with very old web pages and introduces subtle rendering differences that are almost never what you want.

Correct HTML5 Document Start
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title | Site Name</title>
</head>

2. Set the Lang Attribute on <html>

The lang attribute on the <html> element tells browsers and screen readers what language the page content is in. This is critical for accessibility — screen readers use it to select the appropriate text-to-speech voice — and it helps search engines understand and correctly index your content. Use a valid BCP 47 language tag: lang="en" for English, lang="en-US" for American English, lang="fr" for French, etc.

3. Write Descriptive, Unique Title Tags

The <title> tag is the single most important on-page SEO element. Google displays it as the clickable headline in search results. Best practices:

  • Keep it between 50–60 characters to avoid truncation in search results.
  • Include your primary keyword near the beginning.
  • Make every page's title unique across your site.
  • Include your brand name, typically at the end: Page Topic | Brand Name.

4. Write Compelling Meta Descriptions

The <meta name="description"> tag doesn't directly affect rankings, but it dramatically affects click-through rate (CTR) from search results. Google often (but not always) displays your meta description as the snippet below the title in SERPs. Best practices:

  • Keep it between 120–155 characters.
  • Write it as a compelling call to action, not a dry description.
  • Include your primary keyword naturally.
  • Make it unique for every page.

5. Use Semantic HTML5 Elements

HTML5 introduced a rich set of semantic elements that describe the meaning and purpose of content, not just its visual appearance. Using semantic elements correctly benefits SEO (search engines understand your content structure better) and accessibility (screen readers can navigate by landmark regions).

  • Use <header> for the page header or section header — not just any block at the top.
  • Use <nav> for navigation menus.
  • Use <main> for the primary content of the page (there should only be one per page).
  • Use <article> for self-contained content that makes sense on its own (blog posts, news articles, product cards).
  • Use <section> to group thematically related content within an article or page.
  • Use <aside> for supplementary content like sidebars and callout boxes.
  • Use <footer> for page or section footer content.

6. Get Your Heading Hierarchy Right

Headings (<h1>–<h6>) create an outline of your page content that search engines and screen reader users rely on to understand structure and navigate efficiently. The rules:

  • Use exactly one <h1> per page — it should be the main topic title.
  • Use <h2> for major sections under the <h1>.
  • Use <h3> for subsections under each <h2>.
  • Never skip levels — don't jump from <h2> to <h4>.
  • Don't choose headings based on their default visual size — use CSS to style them. The heading level should reflect semantic hierarchy, not desired font size.

7. Write Meaningful Alt Text for Images

Every <img> element must have an alt attribute. Alt text serves two vital purposes: it's read by screen readers for blind users, and it's indexed by search engines as image content. Best practices:

  • Describe what the image shows clearly and concisely: alt="Bar chart showing website traffic growth from January to June 2025".
  • For decorative images that add no informational value, use an empty alt attribute: alt="" — this tells screen readers to skip it.
  • Don't start with "Image of" or "Photo of" — screen readers already announce images as images.
  • Don't keyword-stuff alt text. Write it for humans first.

8. Add ARIA Roles and Labels Where Needed

Accessible Rich Internet Applications (ARIA) attributes supplement HTML semantics for complex interactive widgets that have no native HTML equivalent. Use them to add missing context for assistive technologies:

  • aria-label — Provides an accessible name for elements without visible text labels (e.g., icon buttons).
  • aria-describedby — Associates a description with an element.
  • aria-expanded — Indicates whether a toggle element (like a navigation dropdown) is open or closed.
  • role="navigation", role="main", etc. — Use only when native semantic elements aren't used.

The first rule of ARIA: don't use ARIA if a native HTML element with the correct semantics already exists. Use <button> for buttons, <a> for links, <nav> for navigation — then you won't need ARIA.

9. Minify HTML in Production

Removing unnecessary whitespace from HTML before serving it to users reduces the document size, speeds up the browser's HTML parser, and improves Time to First Byte metrics. While the savings per page are smaller than CSS/JS minification, they add up significantly on high-traffic pages.

Use our free HTML Minifier to compress your HTML pages, or implement server-side HTML minification in PHP using output buffering with a minification function applied to the output buffer before sending it to the client.

10. Use the Viewport Meta Tag for Mobile

Every modern website must include the viewport meta tag to ensure correct rendering on mobile devices. Without it, mobile browsers render the page at desktop width and then scale it down, resulting in tiny, unreadable text and a terrible user experience:

Required Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Google uses mobile-first indexing, which means the mobile version of your site is what Google uses for ranking. A site without proper mobile rendering is severely penalised in rankings.

Format & Minify Your HTML Instantly

Use our free HTML tools to beautify markup for editing or minify it for production.