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.
Related
Can anyone please help with this?
Which type should I follow? Semantic tags or presentational?
The <i> (presentational) and <em> (semantic) give same result.
So which convention should I use and why? Is there any difference between them?
At the dawn of the web before the CSS era, <i> was presentational, but its definition changed since. Today, both <i> and <em> are semantic and have different meanings.
The i element represents a span of text offset from its surrounding
content without conveying any extra emphasis or importance, and for
which the conventional typographic presentation is italic text; for
example, a taxonomic designation, a technical term, an idiomatic
phrase from another language, a thought, or a ship name.
source: http://w3c.github.io/html-reference/i.html
The em element represents a span of text with emphatic stress.
source: http://w3c.github.io/html-reference/em.html
If your use case is really one of those, use the appropriate one (<= this is "emphatic stress"). In future versions of your CSS you might decide to style them differently.
If it isn't and you're just interested in the italic rendering, use none of them but a custom class for which you define a styling in CSS.
<i> — was italic, now for text in an “alternate voice”, such as transliterated foreign words, technical terms, and typographically italicized text (W3C:Markup, WHATWG)
<em> — was emphasis, now for stress emphasis, i.e., something you’d pronounce differently (W3C:Markup, WHATWG)
<i> vs. <em>
It is often confusing to new developers why there are so many elements to express emphasis on some text. <i> and <em> are perhaps one of the most common. Why use <em></em> vs <i></i>? They produce exactly the same result, right?
Not exactly. The visual result is, by default, the same - both tags render its content in italics. But the semantic meaning is different. The tag represents stress emphasis of its contents, while the tag represents text that is set off from the normal prose, such as the name of a movie or book, a foreign word, or when the text refers to the definition of a word instead of representing its semantic meaning.
more info
more info link 2
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.
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.
In real work, I always use EM for italics, STRONG for selection. And SMALL.
I decided to update their knowledge in HTML + decided to look towards the HTML 5
So, xHTML 1.0 strict, as the language of separating flies and cutlets, and allowed the following inline elements related to the text:
I, EM, B, STRONG, BIG, SMALL
here, I came across the first question - why the tags B and I have not been eliminated or at least not become deprecated in XHTML? After all, if you look at the DTD, then about the tag B & I is clearly written:
<! ELEMENT b% Inline;> <! - Bold font ->
<! ELEMENT i% Inline;> <! - Italic font ->
Is the fat content and courses are structural, logical feature? This is clearly a visual feature.
Next, I looked at http://www.w3schools.com/html5/html5_reference.asp and was surprised that the tag BIG somehow removed from the HTML5, and its logical equivalent SMALL - left! Although BIG was even in XHTML 1.0 Strict!
Where is the logic in such permutations? Explain.
There are uses for tags such as i and small that are not presentational but semantic. <small> represents fine print (or legal print) and side comments. And i can be used for text that is traditionally italicized but not emphasized, e.g. book titles, foreign words, and Latin names of species.
As to why <big> has been dropped while <small> hasn't, see this answer.
First of all EM is not for italics, it is for EMPHASIS. STRONG is for strong emphasis. You should never use them for any other purpose. Not according to the HTML 4 specs, XHTML or HTML5.
For presentational effects one should use CSS.
So why has B, I and SMALL been kept in HTML5?
To prevent abuse of EM and STRONG. If you can not use CSS, like on a forum or a wiki, it is better to use non semantic elements, than to abuse semantic ones. As in our comments for Stackoverflow, where I suspect em and strong is being abused a lot, thanks to the WYSIWYG editor we are using.
There might be legitimate reasons to use bold or italics besides what is covered by EM, STRONG and DFN. HTML5 defines this as text that should be spoken in different voice or mood, it thus adds a kind of semantic and a legitimate use case. This slight redefinition is controversial.
In lieu of B and I some software and/or users insert style-attributes. That is trading one evil for an even worse one.
The same applies to SMALL as well. It has received a similar use case, where it sort of carries a semantic meaning. It does NOT mean side commments.
BTW, B and I were not deprecated in HTML 4/XHTML 1.
why the tags B and I have not been eliminated or at least not become deprecated in XHTML?
Nothing was deprecated in XHTML 1.0. It was designed to express HTML 4.01 in XML.
XHTML 1.1 only slightly tweaked it.
Next, I looked at http://www.w3schools.com/html5/html5_reference.asp
No. Not W3Schools. Please no.
and was surprised that the tag BIG somehow removed from the HTML5, and its logical equivalent SMALL - left!
The semantics of small have been redefined. It will (if not changed before HTML5 becomes a recommendation) mean "side comments" and not "a reduced font size".
Standards are more politics than logic reason.
Sign up to any w3 mailing list (personal favourite is public-html), sit back and enjoy(?) the reality soap.
I believe Hickson should stick to use "style" for changing font sizes, not using those "big" and "small" tags.
To maintain "small" and remove "big" is just so wrong.
Personally I'm happy with this state — there are some conventions (semantics) around "small print" and that tag works quite nicely for it. If I said "read the small print" in a conversation, that would make sense, but "read the big print" and you'd be thinking "what's 'big print'?" I'm happy to see big go (never use it) and small stay (use it often).
I don't personally use b, finding strong suits my needs there. But there are cases where you want text italicised but not emphasised. If it's emphasis, I use EM. If it's a citation, I use CITE. If it's some other italics convention, I don't want to misuse EM or CITE.
Wikipedia has some notes on when to use italics, and you'll find some notes here on the various HTML tags that could be used with those examples:
http://www.w3.org/html/wg/wiki/Guide/italics#General_Examples
Feel free to debate any or all examples. It was just my stab at it. Some are straightforward (e.g. use of EM), others are somewhat ambiguous. I prefer to use I for italics rather than choose (a) EM, where that would be misuse or (b) SPAN with font-style italic, which carries NO semantic meaning.
The fact is there are semantics attached to use of italic test (in English at least) and HTML does not provide custom elements to deal with all of them, nor does it need to imho. I is a suitable middle ground.
And for anyone who dislikes using it, you never have to! It's not mandatory :)
I think, part of the answer about <big> and <small> can be found in the spec:
The small element represents side comments such as small print.
Note: Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
So basically the semantics of <small> is “side comments” and “small print” (in the sense of disclaimers), which is encoded in HTML by an element named “small”. Maybe the naming should be better, of course.
Why is <small> still in HTML5, but <big> isn’t?
I’d assume <small> is still around because it’s often used for side comments, disclaimers, etc in practice, and there isn’t an existing HTML element suited to the task.
Ian Hickson tried to design HTML5 based on how HTML was used in practice: paving the cowpaths. Thus there are places where logic is sacrificed for practicability. (As it says on the WHATWG blog, “Please leave your sense of logic at the door, thanks!”.
If people are already using <small> for side comments, and aren’t using <big> for anything meaningful (I say “if” as there’s plenty of room to debate and/or research that), then why not enshrine the common usage of the former in the spec, and remove the latter?
Why are <b> and <i> still in HTML5 if they’re purely visual in effect?
<b> and <i> have been redefined to have meaning in HTML5, although it’s a very light form of meaning:
<i>: “a span of text in an alternate voice or mood”
<b>: “a span of text to which attention is being drawn for utilitarian purposes”
They’re now general purpose elements, to be used to distinguish runs of text for reasons not covered specifically by another tag.
Oh, the irony: "fine print" is metonimy for something purely presentational, usually carrying just-as-important information but made harder to read in order to decieve the reader into skipping it. Back in the day of print, it would have been a purely 'CSS' job.
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