Table-less layouts - helps easier indexing of contents

in
A Sample HTML Table
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

Tables in html is meant for displaying tabular contents such as time tables, statistical data, percentage wise breakup of various subjects, etc. However in practice, it was widely used to build website layouts. Often, the entire design / pages were encased in a html table.

Is tables in html a bad thing?

Web design On the face of it, there is nothing wrong in using tables for web-design. But using multiple tables-within-tables complicates the code, making it difficult for Search Engine bots to index the site content properly.

Complicated html code will also make it difficult for browsers to render the page. Resulting in browsers consuming a few more seconds to comprehend how to display the page. This will come off as the site being slow due to site design, when in fact, it was due to the way the html was coded.

HTML is actually a way to mark-up page content. Properly marked content such main headers, sub-headers, paragraphs, quotes, etc., will help Search Engines to index them properly. Using tables for layout design might throw it out of gear.

Semantically mark-up code

The text content in a page can be classified as headings, summary, paragraphs, quotes, bulleted lists, numbered lists, tabulations etc., Since the text content in website were the most important thing for Search Engine rankings, the importance of proper mark-up gains significance.

The 'html' does have proper codes for each of the above classifications. But when an entire page is encased in a table, it is often cannot be coded semantically. It must be said that, a same page can be coded semantically or otherwise and made to appear exactly identical on a browser. So it might look like a trivial issue.

Sample of Semantic HTML Code:

   <h1> Page title </h1>
   <blockquote>  A quote of 1or 2 lines </blockquote>
   
   <h2> Sub-heading </h2>
   <p>  Paragraph text of 3 or 4 lines </p>

   <p>  Paragraph text of 3 or 4 lines </p>

   <ol> 
         <li> 1. Numbered list </li>
         <li> 2. Numbered list </li>
         <li> 3. Numbered list </li>
   </ol>

Benefits:

Semantically coded page helps Search Engine bots in properly indexing the pages. It will give an edge over the competitors who have otherwise similar websites but not semantically coded.

Also, when the page is read through a Screen Reader, it obviously ignores the design elements and follows html code for guidance. Semantically coded page is a huge improvement when 'accessibility' is concerned.

So, to sum up, a semantically coded page will look neat even under peered the hood. As said earlier, beauty need not be skin deep. And the benefits are more than just neatness.


What you want to do?