Logical element placement

Besides the ability to rapidly edit CSS-based layouts, the greatest benefit when using CSS is
the emphasis on accessibility, partly because it encourages the designer to think about the
structure of the document, and therefore logically place the elements within the web page
(first comes the masthead, then the navigation, then the content, etc.). Each element is
then styled to suit.
Using CSS for layout instead of tables is one way of working toward this ideal. The logical
placement of each element in the web page’s structure results in improved document
flow. And if you’re scratching your head, wondering what on earth I’m talking about, let
me explain. A web page should still make sense if you remove all formatting and design
elements. This is how a screen reader sees the page—it simply reads from the top of
the HTML page downward. Because of the way table-based layouts are created, most
designers aren’t concerned with how the document is structured—merely how it looks.
Therefore, although one element may follow another visually onscreen, that may not be
the case when you look at the document’s code. (Also, tables tend to encourage superfluous
markup, which can also hamper accessibility.) When working with CSS, the structure of
the web page isn’t compromised.