The Right Way To Style

by Chad Miller /// January 22nd, 2008

Webpages, for those of you who are uninitiated in the world of web development, are built from a type of code called HTML, which stands for Hypertext Markup Language. Essentially, the idea behind it all is to take a standard text document (something you’d create in Notepad), and mark it up (using HTML) to indicate additional information about the contents of your document.

Hypertext is actually a fancy technical name for a link. Regular text becomes hypertext when it is hyperlinked to another webpage. That’s the basic definition of HTML.

HTML also contains several other ways to tag your text to indicate various things about it. Among the most common are a tag to indicate a group of sentences as a paragraph (the P tag), a tag to indicate a text segment as a document heading (the H1 through H6 tags), and the list tags (UL, OL, and LI,) which indicate ordered or unordered lists of items.

How Not to Style HTML

Changing text into hypertext is helpful, but it’s not very pretty. Essentially, your document will read as a single column, top-to-bottom, in a single font of a single style. To get around this, people in the early days of the web began inventing new ‘tags’ to indicate style, such as the FONT tag to indicate what font to display the text in, the B tag to indicate bold text, and the I tag to indicate italic text. To get more flexibility in page layouts, people began to use the TABLE tag to make different sections of text display in different areas, rather that all in one column.

However, all of this new styling markup causes a big problem: it interferes with the purpose of HTML, which is to describe the text on the page. For instance, the TABLE tag, which is being used for page layout, is actually supposed to be used to present tabular data in columns and rows. The new styling tags like B, I, and FONT don’t describe the text in the document at all.

That means this method of styling a webpage is little more than a hack, a way to make the system do something for which is was not originally intended. It also obfuscates any real meaning that might be contained in the markup by essentially reducing it to a needle in a haystack.

It should also be mentioned that while this method of styling your webpage might work just fine for your web browser, it can do some really bad things for other kinds of browsers. For instance, if a blind person were to reach your website, their screen reader would have a lot of trouble interpreting meaning from the style markup you’ve provided. Also, search engines such as Google and Yahoo can gather a lot about your website based on the way it’s marked up; using markup to style your document will confuse the robots that try to index your page, which will negatively affect your rankings in search results (meaning that you’ll more likely to end up on the twenty-eighth page of results from a search for your name, rather than showing up on the first page).

The Right Way to Do It

If you use HTML only to describe the content (and not the style) of your document, how are you to make it look good on the web? I’m glad you asked; the solution to this problem is to use the right tools for the job.

There’s a second, complimentary language that you can use to style your well-formatted HTML. It’s called CSS, which stands for ‘Cascading Stylesheets’. The word ‘stylesheet’ should be pretty self-explanatory; it basically means a document that describes the styling for another document.

‘Cascading’ basically means that you can use just one CSS document to style every single page on your website; any change you decide to make will ‘cascade’ down to every page on your website. This makes styling changes a snap; instead of having to change every single page when you decide your site needs a makeover, all you have to do is make the change in one place and every page on your site will reflect that change.

It is possible to have a well-formed HTML document that very well describes your document’s text, while letting it look pretty on the web as well. All you need is a little CSS!

Here are a few resources to help you get started:

• The W3C XHTML Specification; XHTML is a version of HTML that permits no styling markup, which is what we want
• The Level 1 CSS Specification
• W3C’s Webpage Validator can help you find markup problems
• W3C’s CSS Validator, which can help find problems in your stylesheet
• The Web Content Accessibility Guidelines from W3C indicate and prioritize the various checkpoints that must be completed in order to ensure your content is accessible for people with disabilities