Scribd
Upload
0 views

HTML-CSS-Best-Practices-Checklist

The document provides a checklist of best practices for HTML and CSS, emphasizing neatness, good syntax, and validation. It includes guidelines for organizing code, using comments effectively, and ensuring readability. Additionally, it recommends using W3C validation services to troubleshoot and resolve errors in both HTML and CSS.

Uploaded by

redriverjedimaster
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

HTML-CSS-Best-Practices-Checklist

The document provides a checklist of best practices for HTML and CSS, emphasizing neatness, good syntax, and validation. It includes guidelines for organizing code, using comments effectively, and ensuring readability. Additionally, it recommends using W3C validation services to troubleshoot and resolve errors in both HTML and CSS.

Uploaded by

redriverjedimaster
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like