structure trumps presentation
structural hierarchy Designers and editors should organize content structurally rather than stylistically, especially in digital documents. When creating style sheets in a page layout program, label the elements with terms such as “title,” “subtitle,” and “caption” rather than “bold,” “tiny,” or “apple green Arial.” In CSS, elements such as em (emphasis), strong, and p (paragraph) are structural, whereas i (italic), b (bold), and br (break) are visual. As a body of content is translated into different media, the styles should continue to refer to the parts of the document rather than to speciﬁc visual attributes.
Structural hierarchies help make websites understandable to search engines and accessible to diverse users. A document should have only one h1 heading, because search engines apply the strongest value to this level of the document. Thus to conform with web standards, designers should apply heading levels (h1, h2, and so on) structurally, even when they choose to make some levels look the same. Using structural, semantic markup is a central principle of web standards. For more on web standards, see Jeffrey Zeldman with Ethan Marcotte, Designing with Web Standards, third edition (Berkeley, CA: New Riders, 2009).
the City Web site, 2010. Designer: Graham Stinson. The City is a social networking site that helps churches and non-profits engage in community activities. Auto-detection determines whether the reader is using a desktop or mobile phone and then re-routes layout characteristics in order to create a custom view. Each layout references a different CSS file; the main HTML for each page remains the same. text | 135