views:

82

answers:

5

What are practical cons to use W3C valid presentational element, which are not listed as deprecated

  • for XHTML-CSS developers,
  • Sighted End users of site,
  • and for Screen reader users, ?

like <b> , <i>, <br>, <hr>, <small> If i use these tags for presentational purpose. (note: these are also supported in HTML 5)

for example:

  1. If i use <b> in place of <span style="font-weight: bold">
  2. If i use <i> in place of <span style="font-style: italic">
  3. If i use <br> to make line break in paragrah not to make space
  4. If i use <hr> in place of <div style="border-bottom: 1px solid #666">
  5. If i use <small> in place of <span style="font-size: 9px">

I know the difference between <strong> and <b>. My question is not about <strong> vs <b>

+1  A: 

For completeness here is the Index of Elements that lists which are deprecated and which aren't (and you are correct in stating them as not deprecated).

Generally speaking however people use:

  • <strong> instead of <b>;
  • <em> instead of <i>;
  • <hr> and <br> because there is no alternative;
  • <small> is in my experience rarely used, with CSS style being used instead.

It's important to understand that <strong> and <em> have semantic meaning but <b> and <i> do not so there are valid use cases for both.

cletus
cletus, I think he is asking for cons of using non-deprecated presentational tags.
batbrat
A: 

hrs are a pain to style with CSS without adding more html

brs just annoy me as they are not really required when you having padding and margins to play with

I tend to use em or strong rather than i or b - both of these imply italic or bold whereas em or strong are a bit more abstract so if you want to give some 'em'phasis to some text or make some text look a bit stronger they make more sense without necessarily being bold or italic

matpol
+6  A: 

There's not a ‘con’ to using them per se. There's a ‘con’ to using them for the wrong thing. They have often been used for the wrong thing in web pages in the past, but that doesn't mean there's no right thing.

<i> is semantically equivalent to <span style="font-style: italic">: that is to say, there is no semantic content. A word inside <i>...</i> is not more important; a web page text-to-speech converter shouldn't(*) read that word in an emphasised tone of voice.

When you want to emphasise a word, like ‘definitely’ in this sentence, you should definitely use <em>. This is the common case. But when you merely want a typographical detail, such as italicising a block of text just for visual purposes, or typographical quirks like always refering to your site as “ThingsWorld!”, <em> isn't suitable and you'd want the semantics-free version (the <i> or the <span>).

Similarly, <strong> is suitable for “for the wrong thing” above as it is meant to be strongly emphasised. If you just wanted part of the text to be rendered in bold, without implying that it is more important than the surrounding text, you'd use <b> or, again, styles on another element like <span> or <div>.

A common use for <i> and <b> is when you are taking text from an unsemantic source. In particular it is common to be importing content from a word processor or similar application where there is no concept of emphasis as such, only ‘italic’ and ‘bold’. In this case <i> and <b> (or the span equivalents) are appropriate, because you don't know what the semantic intent behind those text styles is; that information is already lost.

If you auto-converted all italics to <em> like many tools do, you might be marking up italics that aren't meant to represent emphasis. For example references to other works, which would be better marked up with <cite>, or words/phrases from another language such as Latin or French, which would be better marked up with <span lang> (and associated style to tell it words from another language should be italicised).

<small> and <big> might theoretically be the same case, but whilst imported text with bold/italic in is common, imported sized text isn't. Consequently no-one uses these tags and you're generally better off with the normal CSS font-size styles.

<br> and <hr> are arguably not presentational in the same way that the above tags are. A line break can be an important part of content (eg. in separating lines in an address), and a horizontal rule represents a stronger separation between sections of text than a mere paragraph. Of course if you use <br> to create fake paragraphs you're doing it wrong (and you're David Siegel circa 1998), and using an <hr> just to get a nice little line that's not right either.

(*: illustrative example; finding out what real screen readers actually do is left as an exercise for the reader.)

bobince
“`<i>` is semantically equivalent to `<span style="font-style: italic">`: that is to say, there is no semantic content.” — in HTML5 (at the moment), it sort of has a very loose meaning: http://dev.w3.org/html5/spec/Overview.html#the-i-element. That is just HTML5 though.
Paul D. Waite
Interesting! They've attempted to work backwards to standardise the ‘non-semantic bold/italic import’ case above — effectively saying “a `<i>` element represents any of a range of things that are usually rendered in italics”.
bobince
A: 

The cons of using <br> elements to indicate line-breaks (and therefore not using <p> elements to indicate paragraphs) is that you're limiting your scope of CSS control over the document. It's much easier to manage many <p> elements of text, than text interspersed with <br>s in one element via CSS.

Whenever I put together am HTML document, I use

  • <br> to indicate a 'soft' break. (As above: rather use margins on <p> elements to show paragraphs.)
  • <hr> to indicate the division of two sections of the document, e.g. between the header and navigation, or navigation and content. When a browser without CSS support views the document, a clear divide is visible. I then hide the <hr>s via the CSS.
ndorfin
A: 

Of your 5 examples, only this one, I think, has significance: "# If i use <small> in place of <span style="font-size:9px>"

Small is relative, whereas font-size:9px is absolute. We should always use relative units, allowing the browser to choose their own absolute scale. <span style="font-size:small"> (or preferably <span style="font-size:smaller">) would be the equivalent.

graphicdivine