| There are two principle ways of structuring HTML | | | | created a summary box that contained a lot of key |
| that Web designers use. The first employs the HTML | | | | phrase rich content. You want the box to appear half |
| table construct, and tables nested within tables. This | | | | way down the page, however you would like the |
| method works fine for creating a site, but the | | | | information to appear near to the top of the HTML |
| downside is that the source code of the site includes | | | | markup. With CSS this is possible. |
| a huge number of table tags and is difficult to read | | | | - People often create different pages from those |
| and understand. This problem is particularly acute if | | | | displayed in a Web browser for site visitors to print. |
| you accidentally delete a table tag and find that you | | | | This is because Web pages are often too wide for |
| Web page is suddenly very badly malformed and you | | | | printing or contain information (such as menus, |
| do not know why. If you look at the source HTML | | | | graphics or repeated information) that are largely |
| (to see the source of a site when using the Firefox | | | | irrelevant in the context of printing. The trouble with |
| browser, click CTRL-U) then it is more difficult to find | | | | these pages is that they contain duplicate content to |
| the actual textual content of the site. Many existing | | | | the original Web page. In his blog, Matt Cutts says |
| and legacy sites use this formatting option. An | | | | that this particular form of duplication should not |
| alternative is to use Cascading Style Sheets (CSS) to | | | | worry 'white-hat' sites too much, but why take the |
| define the format of the page, including page layout | | | | risk? With CSS it is possible to create a style sheet |
| and styling. Because style sheets can be stored | | | | for the screen and another for print, both of which |
| separately from the document that they style, it is | | | | use content on the same page. So, for example, in |
| normally a lot easier to see the textual content when | | | | the print style sheet the menu can be made invisible. |
| viewing the source code of the CSS-formatted page. | | | | - All the pages on a site can reference a style sheet |
| There are debates about which formatting option is | | | | (e.g. my-stylesheet.css). It only requires one small |
| best with regard to Search Engine Optimization | | | | change to the style sheet in order to change |
| (SEO). For example, can a search engine can spider a | | | | formatting, text color or size throughout the entire |
| tables-based site as easily as a Cascading Style Sheet | | | | site, without having to modify pages individually. It is |
| (CSS) based site? In the opinion of this author, | | | | actually possible to change the entire look of a site |
| indexing algorithms are perfectly capable of | | | | just by making changes to the stylesheet. A good |
| extracting text from tables-based pages, however | | | | example of this can be seen at This site shows how |
| most designers now use CSS-based designs, for the | | | | one Web page can look completely different by |
| following reasons: | | | | changing the style sheet alone. |
| - CSS based pages are smaller in size and hence | | | | - CSS based menus are constructed using simple |
| quicker to download. Table constructs require far | | | | HTML list constructs. This means that once a menu is |
| more HTML tags than CSS. This makes the page size | | | | created and styled, it is very easy to add new items |
| greater, which increases the download time for | | | | or delete unwanted ones. The underlying HTML is |
| visitors. It may also have a detrimental effect on | | | | also very easy for search engine spiders to read and |
| SEO since Google has recently stated that it does | | | | understand. It is also readable by devices used by |
| use page download speed as part of its ranking | | | | blind or visually impaired visitors to 'read' the menu |
| algorithm. | | | | data. The same is not necessarily true of Javascript |
| - The data used to format a page is stored in the | | | | based menus. If you compare the source code |
| style sheet rather than the Web page. This makes | | | | behind a Javascript based menu and that behind an |
| the HTML source of the page easier to read by | | | | equivalent CSS based menu, the CSS based menu is |
| people and more efficient for search engine spiders | | | | vastly simpler. |
| since they can read the words without having to | | | | - The h1, h2, and h3 tags are very important in terms |
| parse out a lot of table structure HTML. | | | | of SEO. With CSS it is easy to redefine the look of |
| - The search engines generally give more weight to | | | | one of these tags across your entire Web site, or to |
| information nearer the top of pages. With CSS, | | | | style them differently in different parts of a Web |
| textual contact is more likely to be near the top of | | | | page. |
| the page. You can also position important text near | | | | - Using cascading style sheets it is possible to create |
| the top of the HTML markup even though it may | | | | different style sheets for different browsers, for |
| not appear at the top of the actual page when it is | | | | how the site is printed and for different devices |
| rendered in the browser. For example, say you | | | | (such as cell phones or mobile browsers). |