Best practices of HTML coding
- Please use a common HTML5 polyfill or HTML5 Shiv to enable styling and recognition of HTML5 elements in older devices’ browsers
- Always include a proper doctype to trigger standards mode
- All markup should be delivered as UTF-8, since it has the best support for internationalization
- Should follow the proper naming conventions.
- Close your tags, some tags no need close tag like img and br.
- Explain which DIV you are closing by proper comments.
IDs vs. Classes
- An ID is a unique identifier for that particular element; no other element on the page should use the same ID.
- Classes are not unique. The same class can be used on multiple elements within a page, and a single element can have more than one class, in a space delimited list.Anchors and LinksAll links should point to absolute or relative URLs with user-readable content.
Avoid using <br>tags to separate paragraphs or lines of text. Use <p> instead with proper opening and closing elements.
- Tables should not be used for page layout; only use them when you need to display tabular data.
- Use <table> rather than other elements when displaying multiple records of data.
- The <caption> element is the recommended way to describe a table for both sighted and sight-impaired users, though this can also be done less semantically in the normal page text around the table.
- Use the <thead> and <tbody> elements to denote which row contains column headers so when a user prints the website and the table runs onto another page, browsers can display the <thead> on each page for easier readability.
- Remember to use the scope attribute on the <th> element to indicate whether the header applies to the row or column.
If you are using “float” attribute for more than one DIV Use “clear: both” at the end of parent div close.
<div id="header"> <div id="sub" class="first left">...</div> <!-- #sub.first.left --> </div> <!-- #header -->
- Use CSS Reset (reset.css)
- Never use inline styles – Don’t mix CSS with HTML.
- Include external CSS inside the head tag.
- Use lowercase in your tags.
- Use semantic elements to provide additional semantic value to our documents, make use of HTML5 elements such as <header> ,<article> ,<section> and <footer> where appropriate.
- Keep the syntax organized.
Use conditional comments.
height: 200px; /* normal browsers */
*height: 350px; /* All IEs */
<!–[if lte IE 6]>
<link href=”ie.css” rel=”stylesheet” type=”text/css” />
- You should only give elements an ID attributes if they are unique.
- Classes can be applied to multiple elements that share the same style properties.
All input fields should be associated with a
<label for="home-address">Home Address</label> <input id="home-address" type="text" /></label></label>
Use the optimized images.
- Use Smush tool for image optimization.
- Save for web” Photoshop command
Cross platform and cross browser check
Test while you writing codes at every stage in various browsers to avoid cross browser issues.
To test on cross platform and cross browsers compatibility, please check the below list of tools.
Build pages as a library of components, in such a way that blocks of code can be broken up and reused when implemented.