This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Is it ok to use <strong> in place of <b> blindly ?
When to use <strong> and when to use <b> or other ways to give look of bold? strong has semantic value ( and useful for screen reader while b is presentation (and even valid in HTML 5).
my question is not what is the difference between strong and b.
The question is when to use semantic tag and when to use just to make text bold
Should I always use <strong> if client's content files (MS word files) has some words bold in content paragraphs?
alt text http://shup.com/Shup/365676/11051764618-My-Desktop.png
How can we know when client want to give emphasis to text and when he just want to make text bold for presentation/aesthetic purpose?
If it's client job to tell us, then how to explain this scenario to client to give us clear info on "when he just want to make text bold for presentation/aesthetic purpose" ?
I've always followed a simple rule of thumb:
<strong> means "strong emphasis", and implies no particular visual style. It has semantic meaning, but could look like anything.
<b> is used to apply a bold visual effect to text, but is a presentational tag like <font> and so should be avoided (where possible) in favour of CSS.
How can we know when client want to
give emphasis to text and when he just
want to make text bold for
presentation/aesthetic purpose?
Read the client's text with understanding.
use <strong> when the context says that the bold text is more important than the other (and it is inline)
use <b> if it just should be bold (even in database, feed reader or without stylesheets). In this case boldness may be used to catch the readers eye.
When in doubt, ask the client what did he meant.
To save you and yourself a hassle, ask the client to use formatting styles in his editor. This is very useful feature, pity that there few people who do know what for this feature is.
Edit:
This is strong and this is bold. Any difference?
All the problems begin here. If the strong were by default colored RED (no red markup on SO), and normal weight, there would be no questions like this.
There's no "right" answer to this (which is probably why semantic markup isn't in a good state).
Depending on the way your client works I'd say your proposal to replace emboldened content in paragraphs with <strong>, and everything else with relevant heading styles, is reasonable. It may be a good idea to sample the documents to establish what practice has been used.
First ask the client "why have you highlighted these words?" and use that to inform your decision. If you can't get a clear answer, I'd use <B> since it's better to not imply that there are semantics to the highlighted words when in fact there are none. Use of <B> can be used as a clear indication that you have unsatifactory presentational markup, and therefore helpful to future maintainers that it can be freely corrected in the light of new information about the reason for the highlighting.
If you're doing a conversion of a word document to HTML, then I think <b> is a better choice, because you're conveying the fact that the text was bold in the word document. Word uses styles to apply semantic meaning, so if it's marked with the "Strong" style, then you use the <strong> tag in the HTML.
Using CSS to define a style other than default bold for a <strong> tag is understandable.
Using CSS the same way on a <b> tag would be more questionable.
Related
Is it only for screen reader software? because browser renders both type of tags semantic and presentational in same manner.
For example:
for browser for us and for css <strong> and <b> is same. what is the purpose to semantic tag over presentational tag.
is it for screen readers only or it's for better management of code?
if it's for developer strong and b both can produce same result on browser.
Semantic markup allows scripts to understand context. This may be beneficial for screen reader software, but it will also be beneficial for Google and other search bots.
According to HTML specs, <strong> and <em> communicate emphasis, whereas <b> and <i> simply mean "display bold" and "display italic". <b> and <i> should be used in instances where emphasis is specifically not desired. For example, when italicizing a book title.
When search bots are trying to gain semantic understanding of content, it is reasonable to assume they give greater preference to semantic tags.
<strong> and <b> is a poor example in this case, as they are just historically used in a wrong notion. A lot of people started marking everything bold with <strong>, thus destroying the original intent. My phone browser does not make <strong> bold for instance (although the standards suggests making it bolder on screen).
The idea behind semantic tags is to provide some description about the content. So <strong> tag for menu items does not make any sense, while it makes sense to use it to mark part of a sentence as if it was pronounced louder.
With HTML5 semantic tags make a lot more sense, because the content part of the page is clearly outlined, and every tag inside the content is a usable meta data. Search engines are already good at this, but everyone else isn't.
I suggest reading about the whole concept of Semantic Web.
In theory, an audio page reader could read <strong> text in a different, slower, more emphasized tone of voice. It wouldn't do that for just <b> because that's only a typographical hint for graphical presentation. A terminal-based browser could use underlining to reproduce <strong> as an alternative to bold if it's not an available effect on the terminal, where is principle it wouldn't make sense to do that for typographical <b>. A search engine could give more importance to <strong>ed words.
In practice, I don't think any of these examples actually happen — partly, as HeavyWave says, because decades of poor-quality markup have erased any difference between them that could usefully be drawn — but it demonstrates the philosophical difference.
True or not: We should always use proper capitalization and never put whole sentences in all-uppercase. If we must do so, we should use CSS for this task."
Should we use the CSS property text-transform for other cases if we need them?
(Note that I'm not talking about HTML tags, I’m talking about text content)
Links to read:
http://blog.mauveweb.co.uk/2009/01/14/dont-use-uppercase-in-html/
http://www.webaim.org/techniques/fonts/#caps
Huh? For normal text? That sounds like a ridiculous idea to me. Every language has its rules about what's lowercase and what's uppercase. Why would one want to divert from that?
Update: Sorry Jitendra, I didn't read your update closely. Now this
I head Screen reader spell letter by letter if we use UPPERCASE.
could well be - say, for USA to be spelled like U S A. I could imagine some screen readers do this. But this would only mean not to put words in ALL CAPS - which is a rule you would want to follow anyway.
Having all text in lowercase and uppercasing the right words through text-transform, you would have to put a CSS class on every word that needs to be capitalized - extremely cumbersome, would result in horribleHTML soup, and wouldn't make sense. Just use normal capitalization, and don't use all caps.
You should write content of a page with proper grammar, spelling, and capitalization just as you would in an essay. Navigation and logos should start with an Uppercase (or if it's a name, the proper spelling for the name, e.g. iPhone, not Iphone or IPhone.) Only use CSS capitalization for stylization. So, if you want your site's name to be in all caps (MY WEBSITE) use CSS to make it all caps, but in the HTML make sure it's proper (My Website).
Hope this helps!
It's generally a good idea to concentrate on what's easy for people to read. Almost always, for almost all sorts of information presentation, conventional typographic rules for the language of the site are appropriate, and you should not do anything different without having a really good reason.
The W3C states that all XHTML elements and attribute names should be in lowercase:
XHTML documents must use lower case
for all HTML element and attribute
names. This difference is necessary
because XML is case-sensitive e.g.
<li> and <LI> are different tags.
As for web page content in between tags, of course it is not necessary.
Jaws does not spell out words if they are recognized as English words. FOR EXAMPLE "THIS IS PRONOUNCED NORMALLY." sounds the same as "This is pronounces normally." When dealing with abbreviations capitalization matters. For example "usa" is pronounced phonetically as one syllable. “USA” is pronounced as “u s a” Made up words tend to be pronounced the same regardless of capitalization, for example “FDIOSUF” is pronounced the same as “Fdiosuf”
I'm not talking about HTML TAG i'm talking about text content? I head Screen reader spell letter by letter if we use UPPERCASE.
my question was "Should we always use lowercase text in web page's content?" and use css text-transform for other cases if we need.
Just use natural text, as you did in your SO question. Screen readers will generally read ALL UPPERCASE as individual letters, as such text is generally an acronym (it'll likely vary from reader to reader - some handle things more intelligently than others, and may be able to figure out that a whole sentence isn't likely to be an acronym).
You don't have to lowercase every letter, though - a screen reader shouldn't have any problem with "This Is A Sentence."
UPPERCASE text that isn't an acronym should be done with CSS's text-transform: uppercase;.
It has nothing to do with screen readers. For actual content, you should use normal capitalization. For element names and attributes, you must use lower case if you're using XHTML, because it's case-sensitive and the spec says the tag names and attribute names are lower case. These are two completely different things (content vs.markup).
Edit Re your edited question: You should avoid incorrect use of ALL UPPER CASE TEXT (that would be an example of incorrect use), because screen readers may well spell that out on the theory that it's an acronym like HTML or W3C. But not doing ALL CAPS is not the same as doing all lower case. Use initial capitals at the beginnings of sentences, etc. Don't use ALL CAPS for emphasis, use <em> (or <strong>, depending on the type of emphasis). Doing so marks up your text semantically, which actually helps the screen reader do its job (by allowing it to put emphasis where it should be put).
yes you should, if you would like to modify the text letters use the css property text-transform http://www.quackit.com/css/properties/css_text-transform.cfm
Does it matter <strong> in <em>
<p><strong><em>Some text</em></strong></p>
or <em> in <strong>?
<p><em><strong>Some text</strong></em></p>
Which is semantically correct and more accessible?
Update:
How screen reader would behave in both situation?
Syntactically correct but not semantically correct. <strong> is an "higher order" form, so to speak, of <em>. If you're looking for the effect of <b> and <i>, use CSS. Remember to not choose elements because of how they look but what they mean.
Both ways you have listed are perfectly correct markup-wise, as long as you're not mixing up the order of the closing tags. This would be incorrect:
<p><em><strong>Some text</em></strong></p>
If you care about semantic meaning, you should avoid having both em and strong on an element.
Strong: Renders as strong emphasized
text
(via)
If you care about valid HTML, both solutions are fine and valid.
According to w3 strong is strong emphasis. That means that em and strong should not be used together semantically as the strong is already an em.
If you believe that strong emphasis should be bold italic I think you should just add a css declaration in which you style the strong as bold italic.
In a visual effect perspective, it doesn't matter.
In semantic meaning, it matters since you're using emphasis and strong emphasis in the same element (Some text). It's the same as using h1 in some places just because you want big texts and not because they're titles.
EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.
Source
The presentation of phrase elements
depends on the user agent. Generally,
visual user agents present EM text in
italics and STRONG text in bold font.
**Speech synthesizer user agents may
change the synthesis parameters, such
as volume, pitch and rate accordingly.
So beware. Use CSS to acomplish visual effects, not markup.
In (X)HTML5 the definitions/meanings are:
em: represents stress emphasis of its contents (changes meaning of sentence)
strong: represents strong importance for its contents (doesn't change meaning of sentence)
So these elements can be used together in principle.
To get an idea, think of reading a text out loud (depends on language, though): em might change the intonation (stress), strong might increase loudness.
I think semantically it makes no difference if you use <strong><em>foo</em></strong> or <em><strong>foo</strong></em>; at least I couldn't find anything related in the specification.
See list here:
http://www.w3schools.com/html5/html5_reference.asp
like <b> , <i>, <br>, <hr>, <small>?
Is it means no cons to use these? But what about content and presentation seperation?
Two reasons come to mind:
Because some people (not me, here is a primer about this opinion and here are the WHATWG FAQ about this) don't think of them as presentational. They argue, that <b> has semantics of its own, for example, where <strong> is not right and the text should be bold anyways (IMHO therefore we have <span>)
Because HTML5 has a pragmatic and backwards compatible approach: What worked in HTML4 should work too in HTML5. They argue, that this is why XHTML2 died.
First have a look what WHATWG says about it (this is also mentioned in the answer to the related question cited above).
It is said (as I thought, too) that <strong> and <em> provide an emphasis when using a screen reader, but according to this article by Harry Roberts, it turns out that in practice screen readers don't accentuate text marked this way.
And last, read the spec about <b> (it's already mentioned in the FAQ in the first link, above):
The b element represents a span of
text to be stylistically offset from
the normal prose without conveying any
extra importance, such as key words in
a document abstract, product names in
a review, or other spans of text whose
typical typographic presentation is
boldened.
and <i>:
The i element 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.
Likewise, have a look at <small>, <hr> and <br> (there are examples there, too.)
They have also redefined the meaning and semantics of several of these elements. They realized the need for an element that does something like <b> and there was already an element, so they kept it, and preserved backwards compatibility, instead of introducing something new.
In XHTML Strict, it seems that you're not allowed to use the <u> tag any more. Is there a semantic equivalent like there is for <b> and <i>? If not, is there any convention for how to markup underlined text in XHTML?
Thanks.
In short - no.
<b> and <i> don't really have equivalents, either. It's all about the separation of content and appearance. The goal of XHTML strict is that the XHTML markup should be used to describe the structure of the content.
<em> tags are used to convey emphasis and <strong> tags are used to give strength to the content. It just so happens that the default style sheet in most browsers equates these to italic and bold respectively.
Having a direct equivalent for bold, italic and underline in XHTML would allow people to dictate the appearance of the content too closely. Ideally, you should think about why you want a piece of text to stand out, define that in the structure and then leave the CSS boys to decide how it should ultimately be rendered.
To have an equivalent, you have to define why you are underlining things in the first place. If it's just your preferred way of emphasizing text, then use <em> and change its style in CSS to be underlined instead of italic.
Your question is flawed - "underline" has no semantic meaning, no more than bold or italics do (strong and em have default styles, but they aren't hard wired to bold or italic in the way you think they are).
The correct approach here is to mark up with a <span class="highlight"> (or some other suitable keyword - I don't know your app) or just mark-up with and override the css for <em> if this is going to be a common enough occurrence.
Also: there is always a problem with using underline in any kind of emphasis manner since there is a built up convention that links are underlined. I would generally consider non-linked underlines a usability issue, even if actual links are not underlined. Think carefully that you really need this.
<em style="text-decoration: underline">
No. And there is no "semantic equivalent" to <b> or <i> either. It just so happens that <em> and <strong> (I assume those are what you had in mind) are implemented, by default, using bold and italics in most browsers.
Typographic stuff like underlining should be implemented using CSS, of course. Make a class and use a <span>.
As far as I know not. But it is a bit questionable to see strong as an equivalent of b.
The purpose of the new tags is to decouple the format (bold) from the meaning (more visible text). The default apearance is bold, but you could create any style you like.
nope, you have to use css with text-decoration: underline