HTML Best Practices

For writing maintainable and scalable HTML documents

• General
  • Start with DOCTYPE
  • Don’t use legacy or obsolete DOCTYPE
  • Don’t use XML Declaration
  • Don’t use character references as much as possible
  • Escape &, <, >, ", and ' with named character references
  • Use numeric character references for control or invisible characters
  • Put white spaces around comment contents
  • Don’t omit closing tag
  • Don’t mix empty element format
  • Don’t put white spaces around tags and attribute values
  • Don’t mix character cases
  • Don’t mix quotation marks
  • Don’t separate attributes with two or more white spaces
  • Omit boolean attribute value
  • Omit namespaces
  • Don’t use XML attributes
  • Don’t mix data-*, Microdata, and RDFa Lite attributes with common attributes
  • Prefer default implicit ARIA semantics
• The root element
  • Add lang attribute
  • Keep lang attribute value as short as possible
  • Avoid data-* as much as possible
• Document metadata
  • Add title element
  • Don’t use base element
  • Specify MIME type of minor linked resources
  • Don’t link to favicon.ico
  • Add title attribute to alternate stylesheets
  • For URL, use link element
  • Specify document character encoding
  • Don’t use legacy character encoding format
  • Specify character encoding at first
  • Use UTF-8
  • Omit type attribute for CSS
  • Don’t comment out contents of style element
  • Don’t mix tag for CSS and JavaScript
• Sections
  • Add body element
  • Forget about hgroup element
  • Use address element only for contact information
• Grouping content
  • Don’t start with newline in pre element
  • Use appropriate element in blockquote element
  • Don’t include attribution directly in blockquote element
  • Write one list item per line
  • Use type attribute for ol element
  • Don’t use dl for dialogue
  • Place figcaption element as first or last child of figure element
  • Use main element
  • Avoid div element as much as possible
• Text-level semantics
  • Don’t split same link that can be grouped
  • Use download attribute for downloading a resource
  • Use rel, hreflang, and type attribute if needed
  • Clear link text
  • Don’t use em element for warning or caution
  • Avoid s, i, b, and u element as much as possible
  • Don’t put quotes to q element
  • Add title attribute to abbr element
  • Markup ruby element verbosely
  • Add datetime attribute to non-machine-readable time element
  • Specify code language with class attribute prefixed with language-
  • Keep kbd element as simple as possible
  • Avoid span element as much as possible
  • Break after br element
  • Don’t use br element only for presentational purpose
• Edits
  • Don’t stride ins and del element over other elements
• Embedded content
  • Provide fallback img element for picture element
  • Add alt attrbute to img element if needed
  • Empty alt attribute if possible
  • Omit alt attribute if possible
  • Empty iframe element
  • Markup map element content
  • Provide fallback content for audio or video element
• Tabular data
  • Write one cell per line
  • Use th element for header cell
• Forms
  • Wrap form control with label element
  • Omit for attribute if possible
  • Use appropriate type attribute for input element
  • Add value attribute to input type="submit"
  • Add title attribute to input element when there is pattern attribute
  • Don’t use placeholder attribute for labeling
  • Write one option element per line
  • Add max attribute to progress element
  • Add min and max attribute to meter element
  • Place legend element as the first child of fieldset element
• Scripting
  • Omit type attribute for JavaScript
  • Don’t comment out contents of script element
  • Don’t use script-injected script element
• Other
  • Indent consistently
  • Use absolute path for internal links
  • Don’t use protocol-relative URL for external resources
• Contributors
• License

Read more on https://github.com/hail2u/html-best-practices