#7 multiple duplicate ids and table layout

submitted on by Dirty-Co.de

Bad code

 <table>
   <tr id="body">
     <td id="body">
       <table id="body">
         <tr id="body_row">
           <td id="body_left">…</td>
           <td id="body_middle">…</td>
           <td id="body_right">…</td>
         </tr>
       </table>
     </td>
   </tr>
 </table>

Issues and how to fix them

An id should be unique no matter on which tag it’s added. Also this code uses a table-based layout (and yeah, it’s on a live production site still running, redesigned in 2016). Avoid using tables for layout reasons only, because table elements have a semantic meaning. Using them could make your document more confusing for some people.

  1. Replace the current markup with semantic HTML5 tags. This reduces the number of tags and avoids the table-based layout.
  2. Style the new elements by using Flexbox or CSS Grid.
  3. For the ID values, more semantic terms should be used.

Good code

 <main id="body">
   <aside id="secondary_content"> </aside>
   <article id="primary_content"> </article>
   <aside id="tertiary_content"> </aside>
 </main>