Code quality

The layout test looks for the use of non-semantic HTML.

Why do we test for this?

Semantic HTML is the use of HTML markup to define the semantics (or meaning) of information in a web page, rather than how it should be displayed. It is considered best practice to use Semantic HTML to mark-up your document and then use CSS to style it appropriately. Use of non-semantic elements like <i> and <font> is discouraged.

Tables were traditionally used to lay out web pages in two columns, but since the advent of CSS and modern browsers a few years ago, it is no longer necessary to use tables for anything but tabular information. It is now best practice to create columnar layouts using divs and CSS. This also helps rendering in non-visual browsers or when a sites stylesheet is not available.

How do we test for this?

We look for elements inside table cells which might indicate the use of tables for layout. These include divs, headings and tables. We also look for presentational tags in HTML like the font tag, the bold tag and the italic tag.

What can I do about it?

It might not be easy, but you should convert all pages of your site that use tables for layout to use divs and CSS. Only use tables for tabular information, e.g. a table of prices. Instead of using presentational elements to format text, use appropriate semantic elements and then style them with CSS.