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
Related
I've been using Font Awesome for a while and I wonder one thing which tag should I use for it.
Here is said that they like the <i> tag for brevity, but using a <span> is more semantically correct.
I read specification for <i> and <span>. Unfortunately, I can't find the difference, they're both have the same context in which they can be used.
The difference between <span> and <i> is that <i> was originally intended for italics font, while <span> is intended to encapsulate a piece of content without changing any css rules immediately. In other words, <span> can be used for any custom css action you want to apply.
Therefore, from a theoretical and historical perspective, <span> would be a more proper choice.
However, <i> is much shorter and the effect in the browser is identical, so choose <i> in order to optimize your page speed with a few microseconds, and your coding speed with a few seconds.
It is because <i> is for italic text in html and <span> can contain any inline element. Thus using span instead of i is more semantically correct. But still <span> is also not denoting for using icons in html, so this is also not more semantically correct until you add a role as img like this:
<span class="your_awesome_font_icon" role="img"></span>
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.
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.