1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HTML <b> <i> <u> OR CSS font-weight font-style ? Which is better?

Discussion in 'CSS' started by kslokesh, Sep 9, 2008.

  1. #1
    HTML Tags <b> <i> <u> Vs CSS equivalents font-weight font-style etc..

    Most people recommend to use CSS for formatting. If I want to make a few words bold which are not continuous, using HTML tags are easier than CSS.

    Eg:
    HTML:
    <b>UNO</b> is United Nations Organization. <b>WHO</b> is World Health Organization.

    CSS:
    <span style="font-weight:bold">UNO</span> is United Nations Organization. <span style="font-weight:bold">WHO</span> is World Health Organization.

    Are there any short equivalents in CSS for <b> <i> <u> tags?

    Kindly tell if any.

    And

    Does it cause any problems if Bold, Italics and Underline tags are used within CSS:
    <span style="font-weight:bold">WHO is <u>W</u>orld <u>H</u>ealth <u>O</u>rganization.</span>
     
    kslokesh, Sep 9, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The difference is based on the reason for bolding, italicising, and underlining things.

    In ye olden days, when people read words on paper and wrote books : ) there were (are) certain typographic "rules" that were followed. One of them was, if you were writing an article or a bibliography at the back of your paper, you underlined or italicised the titles of your sources. Since this is typographic standard instead of a visual style, you would use <i> and not <em>, or you'd use <u> instead of a span with text-decoration: underline.

    If you were writing about a species of creature, the species name is italicised by convention, so you'd say <i>Homo sapiens</i>. If you were saying,
    <p>No, that's not the reason he went to Groningen</p> and you needed to emphasise a word, you'd use <em>:
    <p>No, that's <em>not</em> the reason he went to Groningen</p>
    There was another reason he went to Groningen.
    <p>No, that's not the reason he went to <em>Groningen</em></p>
    Groningen as opposed to Friesland.
    In these contexts, the emphasis isn't for styling purposes but to set the meaning in the text. So, being part of the text and thus the content, it belongs in the HTML as an HTML tag.

    If you are making something bold just so it stands out on the page (as it seems in your example text) then using CSS to style those words makes more sense. If the words are bolded because, were someone to read this out loud, the words are meant to be said louder, or with pauses around then, to make them stand out from the message (and not stand out just visually), then <strong> tags are probably the ones you want. A screen reader will even say those words harder.

    In your example, you could kill multiple birds with abbr : )
    <p><abbr title="United Nations Organization">UNO</abbr> is a bunch of pussies who'll write an angry letter at you if you commit genocide over the course of 10 years. <abbr title="World Health Organisation">WHO</abbr> is not a rock band.</p>

    abbr has some predefined styles like a little stripy underline but you can set whatever you want in CSS.
    abbr {
    text-decoration: none;
    font-weight: bold;
    other stuff;
    }

    : )

    You can mix and match to your heart's content. Although if you were aware of the CSS property first-letter, you'd likely want to do it differently : )
     
    Stomme poes, Sep 9, 2008 IP
  3. kslokesh

    kslokesh Well-Known Member

    Messages:
    153
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #3
    Thanks for the good explanation..

    I didnt know that <strong> will have an effect on the screen readers also..

    You said using CSS makes more sense if you want to make the appearence of the text.

    BUT It needs a long <span style="font-weight:bold">Text</span> .
    HTML bold is very easy. just <b>Text</b>.

    Using CSS to format a paragraph or some large text is good. but within that paragraph if I want to make 1 or 2 words in each sentence bold means, using CSS for this will take more typing.

    Are there any freeware WYSIWYG Editors which uses only CSS for formating.
     
    kslokesh, Sep 9, 2008 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Basically the general consensus is to use CSS for anything presentational within your website. Unless you have to.

    You can use HTML bolding once/twice on a page to highlight words relevant to the page in order to help Search Engines define what's important. However it's effects are minimal, nothing major.

    I suppose you could even make bold font-weight normal and trick SE into thinking something is bold.

    But anyways personally I would use CSS if it was for whole paragraphs, or sentances that needed formatting..however for just a single word I would probably use the HTML equivalent.
     
    wd_2k6, Sep 9, 2008 IP
  5. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #5
    When it comes to styling, <b> <i> <u> are all deprecated now.

    One of the principles of Web Standards is seperating structure and presentation. HTML is for structure and CSS is for presentation. You should use CSS if you want to give elements styles.
     
    Ian08, Sep 9, 2008 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Not exactly true. <u>, <s> and <strike> are deprecated, but <i> and <b> are not. Italic and bold text are contextually semantic when used properly. See Stomme poes's answer, above.

    It is simple enough to determine the facts concerning which elements are deprecated and which are not. Look it up before you go spreading misinformation.

    cheers,

    gary
     
    kk5st, Sep 9, 2008 IP
  7. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #7
    Yes, I know using <i> is semantic in rare conditions. I have read a blog comment at SitePoint. Sorry about forgetting to mention what I mean is in general condition.

    But in what kind of condition is the use of <b> semantic? I didn't see Stomme poes mentioned this above.
     
    Ian08, Sep 10, 2008 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    The names of ships, books, journals and magazines are are quite properly set in a bold type face. It is a common convention to make bold the first mention of a person's name in news articles.

    In bibliographies, the author's name may be bold, the journal's name italicized and the article's title quoted. Alternatively, the author might be in small caps (or another type-face difference, eg. light), the journal name in bold and the article title in italics.

    It became common to use underscoring in place of bold, and quotes in place of italics when using a typewriter, as neither bold nor italic was available. The substitutions have become common in print.

    The use of underscores in place of bold is confusing on the web, as the underscore is a common convention (along with color) used to indicate a hyperlink.

    The use of bold is not as common as it was in the pure typeset days, but it's still around and has its purposes.

    cheers,

    gary
     
    kk5st, Sep 10, 2008 IP
  9. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #9
    I respectfully disagree with that opinion. There is no unified rule indicates that authors' and journals' name should be bold or italic for distinguishing purpose, and the use of bold or italic type you mentioned are for emphasis. Therefore We should always use CSS to style them instead of using non-semantic markup.
     
    Ian08, Sep 10, 2008 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    You are perfectly within your rights to be wrong.

    Where did I even imply anything about being a "unified rule"? Within the context of the thread, i said it was typographic convention. Just as indenting the first line, or inserting a blank line indicates, or identifies a typographic paragraph, so do bolding, italicizing, underscoring and quoting imply a contextual meaning to the affected words.

    First, in no way are those uses indicating any kind of emphasis. Second, the use of <b> and <i> elements in these contexts provides an implied meaning. And that, my friend, is semantic markup.

    gary
     
    kk5st, Sep 10, 2008 IP
  11. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #11
    Could you provide some resources or references that indicate using bold and italic font on authors' and journals' name is a "typographic conventioin"?
     
    Ian08, Sep 10, 2008 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    Sheesh! Look it up. Try the Chicago Manual of Style, the MLA Style Manual (notice their own use of bold for the manual's authors' names), or the USGPO Style Manual. Since italics and underscores are replacing bold in newer references, take a look at some historical references. If you can't find it on the web, try the library; that's what they're for.

    gary
     
    kk5st, Sep 10, 2008 IP
  13. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #13
    The manuals you said are just like Section 508 that were established by and used in American or English-speaking country. They are not international standards.

    The Web Standerds I mean is international, like ISO.
     
    Ian08, Sep 11, 2008 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    If your web site is not in the English language then of COURSE you're not going to use Chicago or Harvard notation, or Oxford citation. But remember teh interTubes began for the exchange of research papers where bibliographies were a regular thing (nowadays, you see them only in research and literature pages... even Wikipedia doesn't generally follow the conventions as far as display styles, though they do ask that an article if for example is done in Harvard styles that the whole article is done so, but that's more for the other conventions (order, author names, where the commas go).

    Nah, it needs <span>text</span> which is short enough : )

    You move the styles into your CSS sheet (don't have one? Make one!):
    p span {
    font-weight: bold;
    }

    I do it all the time... I have a list of countries I just made today for a site, where the name of the country is normal weight and the number and () afterwards are bold. I could have used bold tags but its purpose was only for better visual differentiation-- the bold is NOT content:

    <ul>
    <li><a href="#">Kazakhstan <span>(12)</span></a></li>
    <li><a href="#">Zweden <span>(3)</span></a></li>
    etc...
    </ul>

    ul a {
    blah blah styles;
    }
    ul a span {
    font-weight: bold;
    }

    done.

    The point Gary is making is that you determine whether to use <i> or <em> based on whether the oblique/italics is <strong><em>part of the content</em></strong> or just <b>used for visual pretties</b>, and looking to see if you should be follow a typographical convention is one way to know what to use.

    There is a place for <i> and <b>. There is a place for <strong> and <em>. There is a place for <span style="blah blah blah;">. If it's considered a typographical styling convention in the language you are writing in, use the tags in HTML. If you need to emphasize the text or set it apart in some way in order to affect its meaning, use the other HTML tags. If it's purely for styling purposes or for teh pretties, keep it respectably in the CSS. Turning CSS off on such a page should not change the meaning of the content.

    Here's another convention (not used worldwide but again, go by the language or the country you are targetting):
    Harry Potter<br>
    the closet under the stairs<br>
    5 Privet St.<br>
    London<br>
    whatever they use for postcodes, England

    Those BR's in this case are not "styling" but are considered part of the content because of postal conventions. You COULD do it the strange way:
    <p>Harry Potter</p>
    <p>the closet under the stairs</p>
    <p>5 Privet St</p>
    etc...
    or
    <p>Harry Potter <span>the closet under the stairs</span><span>5 Privet St</span><span>London</span>Postcode, England</p>

    p span {
    display: block;
    }

    But turning CSS off makes the content turn into something other than what the author intended. And that means it probably belonged in the content.
     
    Stomme poes, Sep 11, 2008 IP
  15. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #15
    I agree with the use of <br /> for postal address. :)
     
    Ian08, Sep 11, 2008 IP
  16. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Hmm kind of off topic, but I really dislike the Harvard referencing style, or any referencing for that matter.
     
    wd_2k6, Sep 11, 2008 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    If you have to reference something, though, it of course makes sense that you do it in some standard so everyone knows how to read them.

    Even if you're doing the Oprah Winfrey Book Club thing, on a website you should make the title real clear that it's a title... and whatever you choose to make titles look like titles, stick to it throughout the site.

    If you have written something using others as sources, you really should have a bibliography of some sort (except blogs, I notice people just use hyperlinks : )
     
    Stomme poes, Sep 11, 2008 IP
  18. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Yeah I suppose, well with the internet you really can't guarantee much from websites in relation to trusted sources apart from certain places.

    I just remember the days when I would leave starting an essay until 2 hours after the deadline, and I could spout out as much bullcrap as possible but then I would realise i'd have to source it all in this strict fashion!
     
    wd_2k6, Sep 11, 2008 IP
  19. samehzone

    samehzone Guest

    Best Answers:
    0
    #19
    guys what is the difference between <br /> nd <br/>
     
    samehzone, Sep 27, 2008 IP
  20. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #20
    Both are self-closing <br>s. The closing / is required by xml, and thus by xhtml. Some browsers and the validator would choke on <br/> when rendering as html, but were ok if the space were added. I don't know that it's still an issue, but <br /> works, so why take chances?

    cheers,

    gary
     
    kk5st, Sep 27, 2008 IP