Question

I am working on some legacy PHP code that holds a ton of in-line styling, one of our objectives is to leverage CSS so the code will be cleaner. One thing that got me thinking is the use of native html elements VS the use of CSS, such as bold and italics.

For example,

<b>this is foo</b>

Or in css

.bold { font-weight: bold;}
<span class="bold">this is foo</span>

While these two do the same thing, which one do you guys prefer and why?

Answer 1

Always use HTML tags when they can add meaning, structure, or semantics to your content. If you want to write the sentence I <strong>love</strong> cheese (where the word “love” should carry particular emphasis), the <strong> tag is the correct choice. CSS is absolutely not an acceptable solution.

Always use CSS when you are changing the visual appearance of your page. The title heading on your page is a <h1>...</h1> (end of story), but you can make it bold or not, big or not, purple or not using CSS.

A good acid test is to imagine how a screen reader will interpret your page. If you view the page without any stylesheets attached, it should ideally show your content in a linear, minimal fashion, that is in fact quite ugly, but that conveys all the content you wanted to include on the page.