HTML Style Guide & Coding Conventions

Badar KhalilUpdated September 27, 2026 2 min read

HTML Style Guide & Coding Conventions

Focus Keyword: html style guide | Trending Keyword: html coding conventions best practices

A consistent html style guide keeps your codebase readable, maintainable, and easy for teams to collaborate on. Whether you're a solo developer or working across a large engineering team, following established html coding conventions reduces bugs and speeds up code review — a topic increasingly discussed as teams scale their front-end codebases in 2026.

1. Document Structure

Always start with a proper doctype and declare the language attribute for accessibility and SEO.

2. Use Lowercase for Tags and Attributes

HTML tags and attribute names should be written in lowercase for consistency, even though HTML itself is not case-sensitive.

3. Always Quote Attribute Values

Use double quotes consistently around attribute values. Mixing single and double quotes across a codebase creates confusion.

4. Indentation

Use 2 spaces (or a consistent tab setting) per indentation level. Avoid mixing tabs and spaces.

5. Close All Elements

Even where HTML5 allows optional closing tags, explicitly closing elements avoids ambiguity and browser-dependent rendering quirks.

6. Meaningful Naming for Classes & IDs

Use descriptive, lowercase, hyphen-separated names (kebab-case) for class and id attributes, e.g. class="user-profile-card" rather than class="upc1".

7. Avoid Inline Styles and Scripts

Keep CSS in external stylesheets and JavaScript in external files. This separates concerns and improves caching and maintainability.

8. Comment Generously, But Purposefully

Add comments to explain "why", not "what" — the markup itself should be self-explanatory enough to show "what".

Style Guide Checklist

Rule	Good	Bad
Doctype	<!DOCTYPE html>	Missing or old doctype
Tag Case	<div>	<DIV>
Attribute Quotes	class="btn"	class=btn
Indentation	Consistent 2-space	Mixed tabs/spaces
Naming	main-nav	mn1

Common Mistakes to Avoid

Forgetting the lang attribute on <html>.
Nesting block-level elements inside inline elements.
Skipping alt attributes on images.
Using deprecated tags like <center>, <font>, or <marquee>.

Try it Yourself HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Well-Structured HTML Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <h1>Coding Conventions Demo</h1>
  </header>
  <main class="site-main">
    <p>This document follows a clean, consistent html style guide.</p>
  </main>
  <footer class="site-footer">
    <p>&copy; 2026 Example Co.</p>
  </footer>
  <script src="app.js"></script>
</body>
</html>

Output

Press Run to execute.

Try it Yourself HTML

<!-- BAD: inconsistent quoting, uppercase tags, no closing tags -->
<DIV class=card>
  <P>Some text
  <IMG src=photo.jpg>
</DIV>

<!-- GOOD: lowercase, quoted, properly closed -->
<div class="card">
  <p>Some text</p>
  <img src="photo.jpg" alt="Descriptive text">
</div>

Output

Press Run to execute.

Try it Yourself HTML

<!-- Naming convention example: kebab-case for classes and ids -->
<section id="pricing-table" class="pricing-table pricing-table--dark">
  <h2 class="pricing-table__title">Choose Your Plan</h2>
  <div class="pricing-table__card">
    <p class="pricing-table__price">$19/mo</p>
  </div>
</section>

Output

Press Run to execute.

Exercise: Fix the Style Guide ViolationsHTML

The starter code below breaks several HTML style guide rules. Rewrite it to follow proper conventions: lowercase tags, quoted attributes, closed tags, and kebab-case class names.

Try it Yourself HTML

<DIV class=UserCard>
<P>Name: John
<IMG src=avatar.png>
</DIV>

Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?