HTML Style Guide: How to Write Clean, Consistent HTML

An HTML style guide is a set of simple rules for writing clean, consistent HTML: lowercase tags, quoted attributes, closed elements and neat indentation.

You met a short checklist in the HTML Best Practices lesson. This lesson goes deeper. For each rule you will see a bad version and a good version side by side, and you will learn why the rule helps. A style guide is like the rules of grammar and spelling in a school essay: the reader can still understand messy writing, but clean writing is faster to read and has fewer mistakes.

Why use an HTML style guide?

Browsers accept almost any HTML, even very messy code. So why bother with rules?

• Your future self. In six months you will read your own code again. Consistent code is much faster to understand.
• Teamwork. When everyone writes HTML the same way, nobody wastes time arguing about style, and changes are easier to review.
• Fewer bugs. Rules like "always close your tags" and "always quote attribute values" stop many small errors before they happen.
• Better tools. Validators, formatters and search tools work best on tidy code.

The rules below are the ones most professional teams agree on in 2026. You can find similar rules in the Google HTML/CSS Style Guide.

Document rules: doctype, lang, charset and viewport

Every page should start the same way. Here is a bad start:

<HTML>
<HEAD>
<TITLE>My Shop</TITLE>
</HEAD>

And here is the good version:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Green Leaf Plant Shop</title>
</head>

The good version does four important things:

• <!doctype html> tells the browser to use modern standards mode. Without it, the browser falls back to old "quirks mode" and your CSS may behave strangely. The doctype is not case-sensitive, but lowercase matches the rest of your code.
• lang="en" tells screen readers and translation tools which language the page is in. Use the right code for your page, such as fr, es or pt-BR.
• <meta charset="utf-8"> comes first in the head so that letters like é and € show correctly. You will learn much more about this in the next lesson.
• The viewport meta tag makes the page fit phone screens instead of showing a tiny zoomed-out desktop page.

Writing rules: lowercase, quotes and closing tags

Use lowercase for elements and attributes

HTML does not care about upper or lower case, but mixed case is hard to read. Lowercase is the modern standard.

<!-- Bad -->
<DIV CLASS="Card"><P>Hello</P></DIV>

<!-- Good -->
<div class="card"><p>Hello</p></div>

Always quote attribute values

Without quotes, a value that contains a space breaks. In the bad example below, the browser thinks the class is only product and that featured is a separate, unknown attribute.

<!-- Bad -->
<div class=product featured>Lamp</div>

<!-- Good -->
<div class="product featured">Lamp</div>

Use double quotes every time. Mixing single and double quotes makes code look messy.

Close the elements you open

Some closing tags, like </p> and </li>, are optional in HTML. But leaving them out makes it hard to see where an element ends. Close them.

<!-- Bad -->
<ul>
  <li>Milk
  <li>Bread
</ul>

<!-- Good -->
<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>

Empty (void) elements like <img>, <br>, <input> and <meta> have no closing tag. You can write <br> or <br />. Both are valid, so pick one and use it everywhere. Most modern code uses <br>.

Don't put spaces around the equals sign

<!-- Bad -->
<img src = "logo.png" alt = "Green Leaf logo">

<!-- Good -->
<img src="logo.png" alt="Green Leaf logo">

Layout rules: indentation, line length and blank lines

Indent each nested element by one level. Two spaces is the most common choice. Never mix tabs and spaces in one file.

Line length: try to keep lines under about 80 to 120 characters, so you don't have to scroll sideways. When an element has many attributes, put each one on its own line:

<!-- Bad: one very long line -->
<input type="email" id="email" name="email" autocomplete="email" required placeholder="you@example.com" aria-describedby="email-help">

<!-- Good: one attribute per line -->
<input
  type="email"
  id="email"
  name="email"
  autocomplete="email"
  required
  placeholder="you@example.com"
  aria-describedby="email-help">

Both versions work the same in the browser. The second one is easier to read and easier to change.

Blank lines: add one blank line between big sections, such as between <header>, <main> and <footer>. Don't add blank lines everywhere, or the code looks broken up.

Tip: Let a tool do the boring work. In VS Code, right-click and choose "Format Document" (or press Shift + Alt + F on Windows). The built-in formatter, or the Prettier extension, fixes indentation for you in one second.

Content rules: alt text, comments and file names

Always add alt text to images

The alt attribute describes the image for people who can't see it and appears if the image fails to load. Describe what matters. For a purely decorative image, use an empty alt="" so screen readers skip it.

<!-- Bad -->
<img src="IMG_0042.JPG">

<!-- Good -->
<img src="images/monstera-plant.webp" alt="Monstera plant in a white pot" width="600" height="400">

<!-- Good: decorative divider -->
<img src="images/leaf-divider.svg" alt="">

Write short, useful comments

Comments explain why, or mark big sections. Don't describe things the code already says.

<!-- Bad: says what is obvious -->
<!-- this is a paragraph -->
<p>Free delivery over 50 euros.</p>

<!-- Good: marks a section -->
<!-- ===== Product list ===== -->
<section class="products">
  ...
</section>

Remember that anyone can read your comments with "View Source", so never put passwords or private notes in them.

Use simple file names

Use lowercase letters, numbers and hyphens. No spaces, no capital letters, no special characters.

Bad file name	Good file name	Why
About Us.html	about-us.html	A space becomes %20 in the URL
Logo.PNG	logo.png	Many servers treat Logo.PNG and logo.png as different files
contact_page_FINAL2.html	contact.html	Short and clear
café.jpg	cafe.jpg	Special letters can cause encoding problems

Common mistake: Your page works on your Windows computer but images are missing after you upload it. Windows ignores case in file names, but most web servers (Linux) do not. <img src="Photo.jpg"> will not find photo.jpg on the server. Lowercase everything and the problem disappears.

Practice exercise

Clean up this messy code using every rule from this lesson. Keep the same content.

<HTML>
<BODY>
<H1>Our Team</H1>
<IMG SRC = "Team Photo.JPG">
<p class=intro big>Meet the people behind Green Leaf
<UL><LI>Ana - founder<LI>Ben - designer</UL>
</BODY>
</HTML>

Hint: Start by adding the doctype and a full <head>. Then make everything lowercase, add quotes, close every <p> and <li>, give the image a new file name and an alt, and indent each level by two spaces.

Key takeaways

• Start every page with <!doctype html>, <html lang="...">, <meta charset="utf-8"> and the viewport meta tag.
• Write lowercase elements and attributes, quote every value with double quotes, and close the elements you open.
• Indent with two spaces, keep lines short, and put long attribute lists on separate lines.
• Give every image alt text, write comments that explain why, and name files in lowercase with hyphens.
• Use a formatter like Prettier so your style stays consistent automatically.