HTML Coding Standards and Best Practices

Posted: April 7, 2016 in Uncategorized
  1. Check the doctype for HTML5 coding
  2. Use HTML5 <tags> for responsive site
  3. Use html5.js, modernizr.js for avoiding the browser Issues.
  4. Check the completed HTML page in different browsers like IE7, IE8,..FF,Safari, Chorme in MAC/Windows.
  5. Responsive site will support on modern browsers only (IE9 and above for MS and other updated versions)
  6. Validate your HTML pages and CSS in W3C Validator.
  7. Unique page title is important for all pages
  8. Use media queries for different resolutions
  9. Use percentage(%) for responsive layout
  10. Test your responsive HTML pages in actual devices like mobile/Tablets/Desktops
  11. Don’t use online simulator for resolution/device testing(It may differ)
  12. Mostly avoid the “Pixels” (.px) for responsive layout.
  13. Check the <div> and other tags are closed properly.
  14. Don’t use inline styles
  15. Avoid internal CSS for every pages
  16. Avoid “!important” on CSS
  17. Don’t use CSS browser Hacks until necessary.
  18. Avoid “Position:absolute” property with negative values
  19. Avoid “Negative” values usage in css.
  20. Use one <h1> tag per page is important.
  21. Avoid inline java script
  22. Don’t use many JS files
  23. Use updated JavaScript file
  24. Image file sizes should be minimal
  25. Use Sprite images for easy loading(optional)
  26. Use shorthand CSS for reducing number of lines.
  27. CSS file size should be minimal
  28. Use relevant names for ID/Classes
  29. Don’t use duplicate IDs
  30. Write the <!–comments –> in coding for understanding the new developer/user
  31. Image Optimization (Provide quality image)
  32. Check the Royalty images are licenced
  33. Check the fonts are licenced or used web fonts
  34. Use embedded style fonts for web pages
  35. Use proper naming conventions and tree structure for files and folders

Author: Kirubai (http://articles.org/html-coding-standards-and-best-practices/)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s