Best Practices: HTML Markup

Posted on February 27, 2013. 0 Comments

Validation

1. Please validate your markup using the W3C Markup Validation Service.
2. In terms of portability and re-use potential for your content it helps if your HTML5 pages are XML-compliant. This also ensures that you do not inadvertently omit end tags or nest improperly.

Formatting

1. Indent nested tags one level using tab.
2. Format the markup so it does not run over 80 columns. This would allow for printing of markup for code review and documentation purposes.
3. If nesting too deeply or the end tag appearing far below the start tag, include a comment on the same line as end tag to indicate what start tag it matches:

   <div id="organization">
     <div id="department">
       <div id="group">
         <div id="team">
           <div id="taskforce">
             <div id="member" />
           </div> <!-- taskforce -->
         </div> <!-- team -->
       </div> <!-- group -->
     </div> <!-- department -->
   </div> <!-- organization -->

4. Enclose attribute values in double quotes (") or single quotes ('). It does not matter which one as long as you use one consistently across all your HTML documents.
5. Avoid use of   for creating white space.   should only be used to force two words to wrap together.

Styling

1. Keep all styles in a single stylesheet (e.g. style.css). Never use inline styles even if the styles are not reused anywhere else. One of the main ideas behind CSS is to centralize the control over the appearance of a Website. Inline styles also increase the page size/download time.
2. Use CSS border-top or border-bottom rules instead of using <hr />.
3. Do not use markup to create white space, use CSS instead. This is bad:

   <div class='clear'></div>
   <div id="subHeadWrapper"></div>
   <br />

4. Avoid using HTML attributes for styling elements:

   <!-- 
     Instead of border="0" use img {border: 0} to remove 
     image border in IE 8
    -->
   <a href="#"><img src="image.png" border="0" alt="" /></a>

Optimization

Specify width and height attributes on elements to allow browser calculate the position of elements on loading the DOM and before images themselves are available. This will minimize or eliminate the re-drawing of the page.

Documentation

If you borrow code from somebody on the Web, please include a reference to where it came from in a comment so in the even the code proves defective patches can be obtained from the source. Also indicate whether the borrowed code is incorporated verbatim or you have modified/adapted it.

Semantics

As much as possible, do not use tables to implement layouts. Use tables for presenting tabular data only.