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?
I prefer using the span because it is infinitely stylable. The bold tag is always bold unless you override it, and then it's useless anyway.
If the markup that you are using is supported in the latest html versions then in my opinion you can use it (since this won't be stale in the near future), if not then its better to go the css way to get what you want.
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.
Semantically, you should use html to describe the emphasis used here. The <b> is obsoleted and <strong> should be implemented to describe the text. In addition, the css should reflect the styling for the selector:
strong { font-size: whatever; }
<strong>this is foo</strong>
There are stuff like bold letters that I prefer to still leverage to html, SEO mainly. But if you combine more than one stile i.e. Bold and Italic it would be good to have an style called accent maybe. But trying to keep style out of html would make you happy (Less stuff to maintain) and your users happy (less code to transfer, they would access slim pages).
Instead of using bold (or span class=bold for that matter), you probably should consider the semantics of what you want. Is the text important? Use strong or em (emphasis). This helps on things like search engine visibility as well.
You should choose the tag based on semantics - afterall, CSS can be used to style them to look like anything.
Hi,
W3C recommends keeping your HTML as semantic as possible. So you should use <strong>, <em> and other HTML tags instead of various <span>s with classes on them.
As a matter of fact you could have all your HTML code with just <div>s, but that doesn't mean you should do it.
As for <b>, <i> and other tags with no meaning, you should discontinue them.
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.
IMHO, CSS is the way to go.
Reasons :
1 - You should not mix your styling code with your content.
2 - Easier to customize/change your final representation in required, or can represent them differently using different css.
3 - Separation of responsibilities in terms of who maintains what