DocHero
Lesson 44 +10 XP

HTML Style Guide

HTML Style Guide

A style guide is a set of rules to keep your code clean and easy to read. Think of it like tidying your room so you can find your toys!

1. Always declare the doctype

Start every page with <!DOCTYPE html>. No exceptions!

2. Use lowercase tags

Browsers don't care, but people do. Use lowercase for consistency.

<!-- Good -->
<p>Hello</p>

<!-- Not great -->
<P>Hello</P>

3. Close all elements

Always write closing tags.

<!-- Good -->
<p>Hello</p>

<!-- Bad -->
<p>Hello

4. Use lowercase attributes and quote them

<!-- Good -->
<img src="pic.jpg" alt="A cat">

<!-- Not great -->
<img SRC="pic.jpg" alt='A cat'>

5. Use spaces around attributes

<!-- Good -->
<a href="page.html" title="More info">Link</a>

<!-- Hard to read -->
<a href="page.html"title="More info">Link</a>

The second one works, but cramming attributes together is hard to read. Separate them with spaces!

6. Always add alt text to images

<img src="dog.jpg" alt="A happy dog">

7. Use the right title

Always give your page a meaningful <title>.

8. Use lowercase file names

Use mypage.html, not MyPage.HTML. Many servers care about the difference!

9. Indent your code

Indent nested elements to show their structure:

<ul>
  <li>First</li>
  <li>Second</li>
</ul>

10. Use comments to explain

<!-- This is the navigation menu -->
<nav>...</nav>

11. Keep line length reasonable

Long lines are hard to read. Break them up!

TL;DR

  • Always use <!DOCTYPE html>.
  • Lowercase tags and attributes, with quotes.
  • Close every element.
  • Always add alt to images and a good <title>.
  • Indent and comment your code.
  • Clean code is easy to read and fix!