SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member tekkie's Avatar
    Join Date
    Mar 2001
    Location
    Portland, OR
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    An easy way to <strong> bold?

    I'm working with a client who likes to sprinkle a bolded word or short phrase here and there throughout the text. Even though I want to stick with CSS, it seems much easier to just put in a<strong></strong> where this occurs instead of writing out <span style: font-weight="bold"></span> everytime. Even using something like <span class="b"></span> is more time consuming than <strong>.

    Is there a shorter way designate bold using CSS?

    tekkie

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want boldfacing in general, use <b>...</b>.

    If you want strong emphasis, use <strong>...</strong>. That has nothing to do with boldfacing, though.

    If you want to mark up something with a semantic meaning, for which there is no appropriate element type, use <span class="product">...</span> or whatever, depending on what the boldfaced text represents. Then style that class to yield boldfacing with CSS.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member tekkie's Avatar
    Join Date
    Mar 2001
    Location
    Portland, OR
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How embarrassing...somewhere in the past I was taught <b> was a deprecated tag and <strong> was the recommended replacement! Thanks for setting me straight.

    And that makes my coding much easier.

  4. #4
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tekkie View Post
    somewhere in the past I was taught <b> was a deprecated tag and <strong> was the recommended replacement!
    So do I. Thanks AutisticCuckoo.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not deprecated, it's just that its use is well-defined, and for what most people want to use it for has nothing to do with what it should be used for.

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    somewhere in the past I was taught <b> was a deprecated tag and <strong> was the recommended replacement!
    Well, I disagree with Tommy so I must be wrong
    But HTML is only meant to provide meaning (semantics) to content, not to be mixed with presentational information. So I would never use <b> or <i> - <strong> and <em> on the other hand add additional weight to the words I want to be.. stronger or have more emphasis

    Edit:
    If you want strong emphasis, use <strong>...</strong>. That has nothing to do with boldfacing, though.
    I understand where you are coming from but this is misleading as most people typically use boldface to give a stronger emphasis to text
    This comment actually reminds of the "ways to confuse a web developer stylesheet".
    Code:
    strong {
      font-style: italic;
      font-weight: normal;
    }
    em {
      font-style: normal;
      font-weight: bold;
    }
    Last edited by markbrown4; Sep 16, 2007 at 20:35.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Start coding blog themes - you'll start to think otherwise. (For example, in the blog sidebars, I use <b> instead of <strong> or even headings, since I'm not providing strong emphasis on a category title and I reserve headings for the blog entries.)

  8. #8
    SitePοint Troll disgracian's Avatar
    Join Date
    Aug 2006
    Location
    Samsara
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are still valid uses for both, such as italicising the names of boats or movies. The word shouldn't be emphasised, but it is an aesthetic convention of the written word.

    Cheers,
    D.

  9. #9
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Well, I disagree with Tommy so I must be wrong
    But HTML is only meant to provide meaning (semantics) to content, not to be mixed with presentational information. So I would never use <b> or <i> - <strong> and <em> on the other hand add additional weight to the words I want to be.. stronger or have more emphasis
    Well I agree! <b> is only used for presentational effects! and should be in CSS IMO!
    That does not mean that your site won't validate if you use <b>s though!

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The B element type isn't deprecated, although it is presentational. See the HTML FAQ (scroll down to 'Should I replace B/I with STRONG/EM?').

    Quote Originally Posted by markbrown4 View Post
    Well, I disagree with Tommy so I must be wrong
    Yes, by definition!

    Quote Originally Posted by markbrown4 View Post
    So I would never use <b> or <i> - <strong> and <em> on the other hand add additional weight to the words I want to be.. stronger or have more emphasis
    Agreed. If you want to mark up emphasis, use EM. STRONG is an odd bird here; I now mainly use it for page elements that need to be emphasised (like a 'current page' indicator).

    However, if you want to highlight something without adding semantic emphasis, EM and STRONG are the wrong choice. I and B can be perfectly useful here, at least if there's a typographic convention on which to fall back. You can use a SPAN and a class, of cource, but that only adds bloat, not semantics.

    Quote Originally Posted by markbrown4 View Post
    I understand where you are coming from but this is misleading as most people typically use boldface to give a stronger emphasis to text
    That's neither here nor there. There are typographic conventions that go back a long time. In printed documents the preferred way of indicating emphasis is to italicise the text; hence the default rendering of EM is italic. Stronger emphasis is indicated through boldfacing; hence the default rendering of STRONG is bold.

    That doesn't imply that EM means italic or that STRONG means bold, though. They only indicate emphasis. You could just as well make the text size larger, change the font face, use another colour, or underline the text (although the latter isn't very clever on the web).

    As you said, Mark, HTML is about semantics, not presentation. If you want to emphasise something, use <em>...</em>. If you want that emphasis to show as boldfacing, use CSS to alter the rendering of EM, instead of using <strong>...</strong> if you don't really mean strong emphasis.

    And if you don't want to emphasise, but to make some text stand out for some other reason, you can use I or B. You can even style those with CSS, if you like.
    Birnam wood is come to Dunsinane

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I bet you're sick of this question being asked

    However, if you want to highlight something without adding semantic emphasis
    If you don't want to add any kind of emphasis then don't make it bold or italic!
    And if you don't want to emphasise, but to make some text stand out for some other reason
    To make something stand out is to emphasise it. <- Note the bold text here to emphasise that word. Also please note how it stands out from the other text

    I really enjoy arguing semantics with you Tommy.

  12. #12
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And I love reading all these semantic discussions

    *runs*

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    If you don't want to add any kind of emphasis then don't make it bold or italic!
    There are long-standing typographic conventions that some of us may not be willing to give up. One example is that names of ships should be italicised. That doesn't mean there's any semantic emphasis on the name, though.

    Quote Originally Posted by markbrown4 View Post
    To make something stand out is to emphasise it.
    Yes, but you need to understand the difference between visual emphasis and semantic emphasis.

    You may want to make the name of your product to stand out, visually, on your company website. But that doesn't mean it should be semantically emphasised.

    Imagine the page being read out loud by a screen reader or some other type of speech synthesiser. If you want a word or a phrase to be audibly emphasised, you should use EM (or, possibly, STRONG). The synthetic voice may increase the volume, slow down a bit, perhaps alter the tone.

    But you may not want that for your product name, since it would sound like really bad advertising. You may want it to be read as any other word, but you might still want it to stand out a little, visually. If you don't want to use a different colour, type face or size, you may choose to boldface it. In this case, the B element type could be appropriate.
    Birnam wood is come to Dunsinane

  14. #14
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    But you may not want that for your product name, since it would sound like really bad advertising
    I would have thought the bits that you wanted to stand out visually are the same parts of the page you would want to stand out aurally.

    But you've got a damn good point about the ships!

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I would have thought the bits that you wanted to stand out visually are the same parts of the page you would want to stand out aurally.
    Probably, but the degree of control we have over contemporary aural user agents and assistive technologies isn't enough. The difference between normal and emphasised is too large for that sort of subtle emphasis.
    Birnam wood is come to Dunsinane

  16. #16
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Do strong tags frighten the begeesus out of them?
    Mark-up semantics, not to the user agent and not for presentational.

    Mark wins!

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    This is for visual effect and no other reason so I used b tags.

    See Tantek's reply in this thread.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •