HTML Style Guide & Best Practices
The habits of professional HTML: clean, consistent, readable code that your team (and future self) will thank you for.
What you will learn
- Follow standard HTML conventions
- Write code that is easy to read and maintain
- Avoid the most common bad habits
The professional checklist
- Always declare
<!DOCTYPE html>and setlangon<html>. - Use lowercase tag and attribute names.
- Always quote attribute values with double quotes.
- Always close your elements (and self-close
<img>,<br>cleanly). - Always add
alton images and<label>on inputs. - Indent nested elements consistently (2 spaces is common).
- Use meaningful class names (
card-title, notx1). - Prefer semantic tags over endless
<div>s.
Messy vs clean
Here is the same tiny snippet written two ways — first carelessly, then following the checklist above. Both show the same thing in the browser, but only one is code you would be happy for a teammate to read. Compare them, then see the breakdown below.
<!-- Messy -->
<DIV><P>Hello <IMG src=cat.jpg></P></DIV>
<!-- Clean -->
<div>
<p>Hello <img src="cat.jpg" alt="A cat"></p>
</div>Both produce the same picture, but spot the differences: the messy version uses UPPERCASE tags, has an unquoted src=cat.jpg, a missing alt, and everything crammed on one line. The clean version uses lowercase tags, quoted attributes, an alt description, and tidy indentation — far easier for a teammate (or future you) to read.
Tip: Set up a formatter in VS Code (like Prettier) to auto-indent and tidy your HTML on save. Consistent formatting is a free professionalism boost.
Q. Which is the best practice for attribute values?
✍️ Practice
- Take an old messy file and clean it up: lowercase tags, quote attributes, indent properly.
- Install Prettier in VS Code and format a file on save.
🏠 Homework
- Write your own 8-point HTML checklist and pin it near your desk.