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.
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.
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.
Shouldn't both be removed? Or does it mean we should use <small>? Why is <big> removed but <small> is not? What is the problem with <big> which does not apply to <small>?
http://www.w3schools.com/html5/html5_reference.asp
Remember, the tags are meant to be semantic, not presentational. There is such a thing in English as "fine print". This is what the small tag represents. There is no analogous concept of "big print" except for a header, which is already covered by seven other tags.
<small> is used more frequently, for footnotes and such...with <h1>, <h2> and <h3> there just wasn't a use for <big>, hence why it's removed.
The same logic that applies to small (as "fine print") is also just as true for big (as "warning"). Public postings, mostly, but also manuals or even contracts often have things written in bigger fonts that signify [so... semantics!] a warning.
It's not the same as emphasis, which has a meaning in context, but rather "whatever you skip in this text, this part you should read because it's not the usual blah blah but something with immediate and important consequences"
That's why I think big and small should both be out or both in.
Some purely presentational tags managed to slip through into the spec before but the 2 standards bodies have finally reached a concesus to remove all purely presentational tags in favour of using CSS. If something has no semantic value and is purely for visual apearance - it does NOT belong in the markup - it belongs in a stylesheet.
I would like to know the best way to markup scientific names in XHTML. This answer says I should use the <i> element, which I'm not too in favour of, unless of course, it is the right element to use.
I could use <span class="scientific">, but seeing as one of the first uses of HTML was to markup scientific documents, I'd imagine there'd be a better semantic hook for this sort of thing.
Also, is there any element to markup the common name of a scientific name?
Note: It looks like Wikipedia, or at lease this article is using <i> for scientific nams.
Edit: Would the <dfn> tag be appropiate?
dfn is for a definition of something.
<p>The prefix cardio- means <dfn>of the heart</dfn>.</p>
As far as I can see in the list of HTML 4 elements nothing specifically fits the bill. This leaves you with a few options:
<span class="scientific">cardio</span>
The semantics are added by the class, and so this is probably the most correct way, technically. However, it does have the downside that without your CSS, it won't appear different in any way to the surrounding text. Another option might be this: /me prepares to duck for cover
<i class="scientific">cardio</i>
Now before I get my head bitten off for using the verboten element, <i>, consider that it is no less descriptive than using <span>, and even if a stylesheet were missing, you'd still get vaguely the correct formatting. Just make sure you add the class attribute.
In (X)HTML5, the i element should be used:
[…] such as a taxonomic designation, a technical term, an idiomatic phrase or short span of transliterated prose from another language, a thought, or a ship name in Western texts.
I guess "taxonomic designation" matches your case.