HTML Style Guide
Following a consistent HTML style makes your code easier to read, easier to diff, and easier to hand off. These conventions cover most of what teams agree on.
Recommended conventions
| Rule | Yes | No |
|---|---|---|
| Always declare the doctype | <!DOCTYPE html> | (missing) |
| Use lowercase tag and attribute names | <a href="/"> | <A HREF="/"> |
| Quote attribute values | class="btn" | class=btn |
| Indent consistently (2 or 4 spaces) | Same throughout the file | Mixed tabs and spaces |
Always include alt on <img> | <img src="…" alt="…"> | <img src="…"> |
Always declare <title> and <meta charset> | In every page | Skipped on "small" pages |
| One newline between major sections | Readable blocks | Walls of unbroken markup |
| Close all elements explicitly | <p>…</p> | Relying on auto-closing rules |
Tip: Use an automated formatter such as Prettier. It removes "style" from code review entirely.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Style Guide</title>
</head>
<body>
<h1>HTML Style Guide</h1>
<p>This is a demo page for the "HTML Style Guide" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Use lowercase for the tag name to match the standard convention.
<
>Hello</
>
A single lowercase letter for the paragraph tag.
Discussion
Loading…