Is applying the bold tag in your html document still semantic? Or should css replace that?

 

I've got <b> tags in my html and it validates (xhtml strict) but is it standards compliant?

 

Thanks.

I believe <strong> is the 'new' <b>

<strong> is more semantic but only use it when you need to make something "strong" context wise. If all you need is for it to be bold, use CSS.

<b> used to be for making text bold for a reason, but then <strong> was introduced as a way of emphasising text for screen readers, and <b> was left in sort of a debate of should it be used or not.

 

personally I think <b> could be used within semantic mark-up to make text bold that doesn't need to be emphasised and is for design purpose only. You will get those that say that <b> should never ever be used and that you should use css to make text bold but...

 

 

<p>this text is <b>bold for no reason</b> within a paragraph</p>

 

has just the same value as

 

<p>this text is <span>bold for no reason</span> within a paragraph</p>

 

and it can be styled exactly the same in the css as the <span> can be. Plus draft HTML5 documents have gotten <b> within them for this purpose, so if w3c think that <b> is of value then it still must be

The strong and em tags are intended to reflect how the emphasised text would sound when read aloud. Text between b and i tags is not explicitly intended to be read differently: they provide visual emphasis for text that should be highlighted to visual users while not necessarily being read or heard differently. An example of that is the italic styling that is applied to titles of works, like a book title or the caption for an image of a painting. It is also used for certain technical terms, foreign idioms, taxonomic names, etc. and it can be used to highlight key words in an article to attract the reader's attention. These are more than solely presentational because they have a function that goes beyond style. The HTML 5 spec explains this in sections 4.6.15 and 4.6.16, and even though we are not yet using HTML 5 all the time, this part of the spec is worth noting. It shows why we still have b and i and why we still use them. Both types of tags carry semantic meaning and both types are valid, but for different purposes.

 

If text needs visual emphasis but aural emphasis is not appropriate, you can use b or i; if text should have aural emphasis, use strong or em and style it to suit if a corresponding visual emphasis is needed as well (which it usually is). The semantic usage is the primary differentiator here. Just don't assume that using one type of tag over the other (or none) will help users of screen readers: it doesn't necessarily do so with every reader or with standard settings.

 

Some developers cite the separation of presentation from structure as a reason to use span tags to create bold or italic text. But spans are semantically meaningless. Using a span to style text purely for appearance is perfectly acceptable and recommended, but using it to make bold and italicised text for my examples would be inappropriate. Turn CSS off and the visual meaning is lost. That would be little better than placing heading text in p tags.

How about <hr> tags? Are they semantic?

How about <hr> tags? Are they semantic?

 

The hr tag was almost deprecated a few years ago. It is one of the few self-closing tags which was thought to be a bad idea and it's also processed very differently by different browsers when over 2px wide because the middle space between a top and bottom "border" is treated as background-color or color by different browsers and border is also treated differently. Look at http://www.wickham43.net/horizontalrule.html in different browsers.

 

I think experts now recommend that if you want a horizontal line you code it as a thin div with borders and/or a background-color (but even then an empty div is considered bad semantics, so perhaps there should also be text off-screen with a negative text-indent so that screen readers hear "horizontal rule" while viewers just see the line) or even as a border-top.

The wierd thing is, in html5 <hr /> has a purpose, but more than that the <b> and <i> tags are coming back. These won't remplace the <em> and <strong> tags however as they serve different purposes.

 

I point this out for the sake of future proofing your mindset

 

From the HTML5 Draft Spec: http://dev.w3.org/ht...hanged-elements

 

The b element now represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is emboldened.

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized. Usage varies widely by language.

 

The hr element now represents a paragraph-level thematic break.

 

Obviously that is html5, and not xhtml. <i> & <b> are still depreciated within the xhtml doctype. I've always use <hr /> in a semantic manor, it does serve a purpose, and you can make it cross browser fairly easily.

 

+1 for the page you wrote though Wickham, some good info there as usual

Well, I'm glad hr has been given a new lease of life in HTML5.

 

It's always been a well-used tag but it's a pity that browsers have been so different in applying it. As Bocaj says, you can make it cross-browser friendly with a few extra styles (and that really only needs to be done if you code it more than 2px high).