Separate Content from Styling

The best practices recommend that web developers use CSS technologies as the primary way to style content rather than using inline markup elements to style text, inline images for spacing or decoration, and tables for layout. By using structured markup and CSS to style the structure, web developers will create web sites that are easier to maintain and create. The use of inline styling markup, inline images and tables for layout requires extensive editing to make changes and verify consistency with similar content. Using structured markup with CSS makes it much easier to have consistent and complete styling as new pages are built and existing pages modified, as the author does not need to view or edit the inline markup. This also makes pages much smaller and therefore faster to load than pages weighed down with extensive inline styling markup.

Related Resources

  • World Wide Web Consortium
  • Web Standards Group
  • World Organization of Webmasters

Markup

Summary of Markup Associated with the Separate Content from Styling Best Practices
Markup Spec Best Practice
Sub-Category
Description
b HTML4 Text Styling
  • The b element is a deprecated feature of HTML 4.0 and was orginally defined to bold text.
  • If the text content being styled by the b element is a section heading, then the heading elements (h1-h6) should be used to replace the b element. If the text content is a paragraph, sentence, phrase or word, then the CSS font-weight property with a value of bold should be used.
blink HTML4 Text Styling
  • The blink element has never been a part of any W3C HTML specification, but is supported by many browsers and can be used to create a blinking effect on text.
  • Blinking text should be not be used due to accessibility issues with people with visual impairments and photosenstive epilepsy.
center HTML4 Text Styling
  • The center element is a deprecated feature of HTML 4.0 and was orginally defined to center text content.
  • If the text content being styled by the center element is a section heading, then the heading elements (h1-h6) should be used to replace the center element. If the text content is not a heading but a paragraph, div or other block level elements with the CSS text-align property should be used to achieve text content centering.
clear CSS2.1 Layout
  • The clear property is used to stop the floating of content and the associated column effects
float CSS2.1 Layout
  • The float property can be used to create columns similar to the columns that are created with table markup
font HTML4 Text Styling
  • The font element is a deprecated (outdated) feature of HTML 4.0 and was orginally defined to provide inline styling changes to text content.
  • If the text content being styled by the font element is a section heading, then the heading elements (h1-h6) should be used in place of the font element. If the text content is a paragraph, sentence, phrase or word then CSS color, font-family and font-size properties should be used to achieve author styling preferences.
i HTML4 Text Styling
  • The i element is a deprecated feature of HTML 4.0 and was orginally defined to bold text.
  • If the text content being styled by the i element is a section heading, then the heading elements (h1-h6) should be used to replace the i element. If the text content is a paragraph, sentence, phrase or word, then the CSS font-weight property with a value of bold should be used.
marquee HTML4 Text Styling
  • The marquee element has never been a part of any W3C HTML specification, but is supported by many browsers and can be used to create a scrolling text effect.
  • Scrolling text should be not be used due to accessibility issues with people with visual impairments.
table HTML4 Layout
  • The use of table elements should be avoided for the layout of content. The use of tables for layout often results in a confusing reading order for screen readers.
  • If table elements are used for layout limit the nesting of tables to one level of nesting
table[summary] HTML4 Layout
  • When tables are used for layout the summary attribute should not be used
table[th] HTML4 Layout
  • When tables are used for layout the th element should not be used
u HTML4 Text Styling
  • The i element is a deprecated feature of HTML 4.0 and was orginally defined to bold text.
  • If the text content being styled by the i element is a section heading, then the heading elements (h1-h6) should be used to replace the i element. If the text content is a paragraph, sentence, phrase or word, then the CSS font-weight property with a value of bold should be used.
width CSS2.1 Layout
  • The width property is used define the widths of columns when float property is used to columns