Question

For so long, I’ve read and understood the following truths concerning web development:

1. HTML is for content
2. CSS is for presentation
3. JavaScript is for behavior.

This is normally all fine and good, and I find that when I strictly follow these guidelines and use external .css and .js files, it makes my entire site much much more manageable. However, I think I found a situation that breaks this line of thought.

I have a custom forums system that I’ve built for one of my sites. In addition to the usual formatting for such a system (links, images, bold italics and underline, etc) I’ve allowed my users to set the formatting of their text, including color, font family, and size. All of this is saved in by database of forum messages as formatting code, and then translated to the corresponding HTML when the page is viewed. (A bit inefficient, technically I should translate before saving, but this way I can work on the system live.)

Due to the nature of this and other similar systems, I end up with a lot of tags floating around the resulting HTML code, which I believe are unofficially deprecated since I’m supposed to be using CSS for formatting. This breaks rules one and two, which state that HTML should not contain formatting information, preferring that information to be located in the CSS document instead.

Is there a way to achieve dynamic formatting in CSS without including that information in the markup? Is it worth the trouble? Or, considering the implied limitations of proper code, an I to limit what my users can do in order to follow the ‘correct’ way to format my code?

Answer 1

It’s okay to use the style attribute for elements:

This is <span style='color: red;'>red text</span>. 

If users are limited to only some options, you can use classes:

This is <span class='red'>red text</span>. 

Be sure to use semantic HTML elements:

This is <strong>strong and <em class='blue'>emphasized</em></strong> text with a <a href='http://www.google.com' rel='external'>link</a>. 

Common semantic elements and their user-space terms:

• <p> (paragraphs)
• <strong> (bold)
• <em> (italic)
• <blockquote> (quotes)
• <ul> and <ol> with <li> (lists)
• More…?

Likely less common in forum posts, but still usable semantic elements:

• <h1>, <h2>, etc. (headings; be sure to start at a value so your page makes sense)
• <del>, and, to a lesser extent, <ins> (strikeout)
• <sup> and <sub> (superscript and subscript, respectively)
• <dl> with <dt> and <dd> (list of pairs)
• <address> (contact information)
• More…