HTML Best Practices

Writing HTML that "works" in a browser is a low bar — writing HTML that's clean, maintainable, accessible, and easy for other developers (or your future self) to read is a different standard entirely. A handful of consistent habits separate professional-quality markup from markup that merely renders correctly by accident.

Why it matters

HTML is forgiving: browsers quietly repair broken markup, so mistakes do not show up as errors. They show up later, as a layout that differs between browsers or a script that cannot find an element. Consistent, valid markup is what makes a codebase pleasant for the next developer, who is often you.

Consistent Indentation and Formatting

Nested elements should be indented consistently (commonly two or four spaces) so that the document's structure is visually obvious just by scanning it. Inconsistent or absent indentation makes it much harder to spot mismatched or improperly nested tags at a glance, especially as a page grows.

Always Close Tags Properly

Every element that requires a closing tag should have one, closed in the correct order relative to other open tags. Void elements like <img>, <br>, and <input> have no closing tag at all and shouldn't be given one. Relying on a browser's error-correcting behavior to "fix" unclosed or mismatched tags produces markup that is fragile and can render differently across different browsers or parsers.

Avoid Inline Styles

Inline style attributes mix presentation directly into structural markup, making styles harder to reuse, override, and maintain consistently across a site. Styling should live in external or embedded CSS using classes, which keeps HTML focused purely on structure and content, and lets a single style rule apply consistently everywhere it's needed.

• Prefer class-based CSS selectors over inline style attributes for anything beyond a one-off, temporary tweak.
• Keep structural markup (HTML) and presentation (CSS) in separate concerns wherever practical.

Validate Your Markup

Running HTML through a validator (such as the W3C Markup Validation Service) catches structural errors — unclosed tags, invalid nesting, duplicate IDs, missing required attributes — that might otherwise render "fine" in one browser today but break unpredictably in another browser or a future version. Validating markup regularly, especially before shipping a page, catches these issues while they're still cheap to fix.

Example

<section class="pricing-card">
  <h2 class="pricing-card__title">Pro Plan</h2>
  <p class="pricing-card__price">$15/month</p>
  <ul class="pricing-card__features">
    <li>100 GB storage</li>
    <li>Priority support</li>
  </ul>
</section>

Renders a pricing card section whose visual appearance is entirely controlled by an external stylesheet targeting the pricing-card classes, keeping the HTML readable, consistently indented, and free of inline style attributes.

Exercise

Clean up the markup: use lower-case tag names, close the paragraph and list items properly, quote the attribute value, and move the inline styles into a class named highlight in a style element.

Expected result: the same content, with the paragraph in red bold text, written as valid, consistently formatted HTML.

<H1>Features</H1>
<P style="color: red; font-weight: bold">New this month
<UL>
<LI>Faster search
<LI>Dark mode
</UL>
<a href=about.html>About</a>

<style>
  .highlight {
    color: red;
    font-weight: bold;
  }
</style>

<h1>Features</h1>
<p class="highlight">New this month</p>
<ul>
  <li>Faster search</li>
  <li>Dark mode</li>
</ul>
<a href="about.html">About</a>

Quick quiz

Interview questions