use of native html elements vs css

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.

Answer 2

I think you're looking at a false dichotomy, <b> or .bold. Given the choice between these two, I'd probably choose stylised spans over use of the <b> tag, but that's purely to divorce presentation from mark-up.

There is, though, the strong tag, which is more semantic than the use of span.bold, and less purely-presentational than b, although it does, obviously, imply a presentational choice. This is my preferred choice over-all.