1
HTML & CSS Best Practices
Checklist
Contents:
● HTML Best Practices
● CSS Best Practices
HTML Best Practices
Neat & Tidy
Place each element on its own line
Indent nested elements
Good Syntax
Use only straight single (') or double (") quotation marks in the code
Close all opening tags (unless the tag is self-closing)
Leave space between the attributes and the element or other attributes
Follow the attribute pattern: attribute name, equal sign (=), quotation marks
(e.g., id="id-name", class="class-name", alt="description")
Helpful HTML Comments
Comment to define major sections of your code
Comment to explain to other developers about your code
Comment to include the source of copied code
Before your final site goes live, remove comments to yourself and commented out code
HTML & CSS Best Practices Checklist
2
Validate Your HTML
HTML - W3C Markup Validation Service
Before validating, sure you have tags in your code like <!doctype html>, <html
lang="en">, <title>, <head>, and <body>.
Resolve alerts from the top down. Fix the first error and then recheck the code.
Still having issues? Use problem solving & debugging strategies
CSS Best Practices
Neat, Tidy, & Readable
Left-align selectors
Place closing curly braces on their own line, aligned with the selector
Indent each rule (property + value) on its own line and align it with the other rules
Group multiple selectors if the selectors share the same styles
Use shorthand for padding and margin properties with multiple values
Separate multiple font-family values with a comma
Add quotation marks around font-family names with multiple words
Create unique names for classes and IDs
Well-Organized
Add global styles at the top of your CSS
After global styles, write CSS in the same order as the HTML elements appear
No overwritten code (i.e., duplicate properties in the same code block or code blocks that
style the same property for an element)
Float most elements left (it's OK to float nav elements right, though)
HTML & CSS Best Practices Checklist
3
Helpful CSS Comments
Comment to indicate global styles (e.g., /******** GLOBAL STYLES ********/)
Comment to indicate styles for major sections (e.g., /******** HEADER STYLES ********/)
Comment to explain to other developers about your code
Comment to include the source of copied code
Before your final site goes live, remove comments to yourself and commented out code
Validate Your CSS
CSS - W3C CSS Validation Service
Resolve alerts from the top down. Fix the first error and then recheck the code.
Still having issues? Use problem solving & debugging strategies
HTML & CSS Best Practices Checklist
