Use semantic HTML elements
Semantic elements describe the meaning of the content they contain, not just how it looks. Prefer meaningful tags such as <header>, <main>, <section>, <article>, <aside>, <nav>, and <footer> over generic <div> and <span> containers wherever a more specific element applies.
Semantic markup improves document structure for three audiences at once: developers reading the code, screen readers conveying the page to users with disabilities, and search engine crawlers understanding the content hierarchy. A page built with proper semantic structure requires less CSS to communicate its layout to assistive technologies and is significantly easier to maintain as the codebase grows.
- Use
<nav>for navigation menus, not a<div class="nav">. - Use
<main>once per page for the primary content area. - Use
<article>for self-contained content like blog posts or news items. - Use
<section>to group thematically related content within a page.
Keep indentation consistent
Choose a consistent indentation style — either two spaces or four spaces — and apply it uniformly across every file in your project. Mixed indentation (tabs in some places, spaces in others) is one of the most common sources of confusion during code review and makes it harder to spot nesting errors at a glance.
Clean indentation makes the parent-child relationship between elements immediately visible. When you can see at a glance that a <ul> contains several <li> elements, each of which contains an <a> tag, the structure is self-documenting. If indentation is inconsistent, you have to parse the HTML mentally to understand what is nested inside what.
Using an online HTML formatter is the fastest way to apply consistent indentation across an entire file without doing it manually.
Write accessible markup from the start
Accessibility is easier to build in from the beginning than to retrofit later. These habits cost very little time during development but make a significant difference for users who rely on assistive technologies:
- Use a logical heading order — start with a single
<h1>per page and use<h2>through<h6>in order without skipping levels. Headings are used by screen reader users to navigate pages. - Add meaningful alt text to images — describe what the image shows or its purpose. Use an empty
alt=""for purely decorative images so screen readers skip them. - Associate labels with form inputs — use
<label for="inputId">or wrap the input inside its label. Unlabelled inputs are a common accessibility barrier. - Use button elements for actions — do not style a
<div>or<span>to look like a button. Native<button>elements are keyboard accessible and communicate their role to assistive technologies automatically. - Provide sufficient colour contrast — ensure text has enough contrast against its background. This is a WCAG requirement and also helps users in bright sunlight or with ageing eyes.
Always declare the DOCTYPE and language
Every HTML document should begin with <!DOCTYPE html>. This declaration tells the browser to use standards mode rather than quirks mode, which ensures predictable CSS rendering across all browsers.
The <html> element should always include a lang attribute specifying the primary language of the document, for example <html lang="en">. Screen readers use this attribute to select the correct voice and pronunciation engine. Search engines also use it to understand which audience the page is intended for.
Avoid unnecessary complexity
Every unnecessary wrapper element adds to the DOM size, increases memory usage, and makes CSS selectors more complex. Before adding a container element, ask whether it is actually needed for layout, styling, or semantics — or whether the content could be placed directly inside an existing parent.
- Remove redundant wrapper
<div>elements that serve no styling or semantic purpose. - Avoid deeply nested structures where flatter alternatives exist.
- Do not use tables for visual layout — use CSS Grid or Flexbox instead.
- Inline styles should be avoided in favour of classes; they make styles harder to maintain and override.
- Remove commented-out code before shipping to production. Use version control to preserve history instead.
Include essential meta tags in the head
A well-formed <head> section significantly affects how your page performs in search engines and on social media. At minimum, every page should include:
<meta charset="UTF-8" />— ensures correct character rendering across all languages.<meta name="viewport" content="width=device-width, initial-scale=1.0" />— enables proper responsive scaling on mobile devices.<title>— a descriptive, unique title for each page used in browser tabs and search results.<meta name="description">— a concise summary used as the search result snippet.<link rel="canonical">— tells search engines which URL is the authoritative version of the page.
Validate and format your HTML regularly
Even experienced developers introduce errors — a missing closing tag, a misplaced attribute, or a copy-paste that brings in broken markup from another source. Making validation and formatting part of your regular workflow catches these issues early before they compound.
A recommended process is to validate your structure first, fix any errors the validator reports, then format the corrected code for consistent indentation and readability, and finally do a visual review of the output before deploying. This four-step habit takes only a few minutes and prevents the kind of subtle layout bugs that are time-consuming to track down later.
Check and format your HTML now
Apply these best practices with a free tool that validates, formats, and beautifies HTML directly in your browser.
Try the free HTML formatter →Frequently asked questions
What is the difference between semantic and non-semantic HTML?
Semantic elements like <article>, <nav>, and <footer> describe the meaning of their content. Non-semantic elements like <div> and <span> are generic containers with no inherent meaning. Using semantic elements improves accessibility, SEO, and code readability.
How many h1 tags should a page have?
Best practice is one <h1> per page representing the main topic. Subsequent headings should follow a logical hierarchy using <h2> through <h6> without skipping levels.
Should I use tabs or spaces for HTML indentation?
Either works, but the most important thing is consistency. Two-space indentation is the most common standard for HTML. Choose one style and apply it uniformly across your project — or use an HTML formatter to enforce it automatically.
Do HTML best practices affect SEO?
Yes. Semantic structure helps search engines understand your content hierarchy. A logical heading order, proper use of landmark elements, and valid markup all contribute to how accurately Google can interpret and index your page.
What is the fastest way to apply consistent indentation to existing HTML?
Paste your code into a free online HTML formatter and click Format. The tool applies consistent two-space indentation across the entire file in seconds, which would take significantly longer to do by hand.