Web developer: conform to W3C standards or you’ll shoot yourself (or someone else) in the foot

During debug and bug fixing, I encounter the code written by someone else where they had “<div>  nested inside <span>”.  Sound familiar ?
1. Problem: We are facing  the wrongly rendered webpage (full size screenshot)
2. Root cause: According to HTML standard: http://www.w3.org/TR/html401/struct/global.html#h-7.5.3  : Generally, inline elements may contain only data and other inline elements
3. Analysis & solution:
Bad code:  block element (<div>, <li>,  <p>) is inside inline element (<span/>)

1: <span> 2: <div class="Guideline" id="PG0716A073204"> 3: <li style="font-weight: bold">Prescribing Guidelines: 4: </li> 5: <p>Treatment with HMG CoA Reductase Inhibitors.

6: </p> 7: </div> 8: </span>

Fixed code:  convert block element to inline element and use CSS for styling, conform to HTML standards

1: <span> 2: <span class="Guideline" id="PG0716A073204"> 3: <span style="font-weight: bold">Prescribing Guidelines: 4: </span> 5: <span>Treatment with HMG CoA Reductase Inhibitors. 6: </span> 7: </div> 8: </span>

4. Results: the webpage is render properly now (screenshot)





So, lesson learnt. As modern browser tend to enforce W3C standards more strict, web developers MUST understand and learn them.

To ensure your web is conforming to standards, try out : http://validator.w3.org/  it