Tips for HTML Markup with CSS

Here are some tips for marking up your document with HTML when you're planning to use style sheets:

1. Use HTML to specify context of text or the structure of the document only. That is, you'll use H1, H2, H3... H7 to specify headlines, P to specify paragraphs, BLOCKQUOTE to indicate blockquotes, EM for emphasized text, STRONG for strong text, etc.
2. Always include closing tags, even those that are technically optional such as </LI> and </TR>. The proper way to markup a paragraph is:
   <P>Some paragraph of text. Blah, blah, blah, blah, blah,blah, blah,blah, blah,blah, blah,blah, blah,blah, blah,blah, blah,blah, blah,blah, blah,blah, blah.</P>
3. Don't set alignment attributes. Use CSS to specify alignment.
4. Avoid using any tags that specify presentation such as FONT and CENTER.
5. For bold text, generally use STRONG.
6. For italicized text, use EM, unless the text being marked up must always be displayed in italics. For instance, the title of a book or article. If you're using italics to lend emphasis to the text, EM is more appropriate.
7. Mark up programming code and the like using PRE for multiple lines of code, and CODE for short single-word or single-line snippets of code.
8. Use UL and LI tags for bulleted lists. Use OL and LI for numbered lists.
9. Avoid using tables to layout your page.
10. Set the WIDTH, HEIGHT, and ALT attributes on your images as you normally would. You may occassionally want to still use ALIGN=left and ALIGN=right on your images. That's ok. I think this is appropriate until the browsers provide better support for alignment of inline elements.
11. Stick to the basics and keep it simple!

Remember: HTML was always meant to indicate document structure only. Stylesheets were always intended to specify presentation details. Keep this overall goal in mind when you mark up your documents with HTML, and coding will be simpler.

Copyright © 2001 by Tina McDuffie. All rights reserved.