HTML Best Practices: Clean and Maintainable Pages

Good HTML is not about knowing every element. It is about building habits that keep your pages clear and dependable.

Document

• Always start with <!DOCTYPE html> and a lang on <html>.
• Include charset and viewport meta tags and a unique title.
• Save files as UTF-8.

Elements

• Use the element that matches the meaning: headings for headings, button for buttons, lists for lists.
• Close elements and nest them correctly.
• Prefer semantic elements over div and span.

Style and scripts

• Keep styles in a stylesheet, not in style attributes.
• Load scripts with defer, or put them at the end of the body.

Content

• Write alt text, or alt="" for decoration.
• Use one h1 and keep the heading order.
• Give each form field a label.
• Write link text that makes sense alone.

Code style

• Use lowercase tags and attribute names.
• Quote attribute values.
• Indent two spaces per level.
• Keep one idea per line when it improves reading.
• Choose clear names for id and class, based on purpose.

1
2
3
4
5

<article class="book-card">
  <h2>The Slow Garden</h2>
  <p>A quiet novel about a neighbourhood plot.</p>
  <a href="/books/the-slow-garden">Read more about The Slow Garden</a>
</article>