SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Several examples of when to use <strong> and when to use CSS

    Hi!

    I need help to determine when to use CSS and when to use <strong> (structural emphasis) to make a word look bold. As I said, <strong> (default style is bold) means that the word is more important then the other words surrounding it.

    Here are the examples:

    1/ A sentence where 1 or more words need emphasis => easy choice: <strong>. OK!

    2/ Navigation menu where all elements should look bold => easy choice: CSS font-weight: bold; OK!

    3/ A long sentence which is shortened and ended by three points (should be bold or put emphasis on... difficult to say):
    Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla...

    Here, should the three points be surrounded by <strong> (emphasis) or should a <span> element be added with a class as to make it bold like this: <span class="bold">...</span>. (The preceding sentence is emphasis = <strong> btw )

    Need some insight here.

    4/ A vertical list of hyperlinks (usual <ul> with whatever text... of no importance). Under this list is a more... hyperlink leading to a page where the user can see the whole list (the above <ul> is just the first 5 links).

    Should this more... be styled with CSS (span as above) or be given structral meaning with <strong>?? Need some insight here too.


    I can't come up with some more ambiguous examples but I am sure there are lots of 'em. Could you experts give me some advice here... it would very certainly benefit the whole community.

    Thank you guys!!

  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)
    STRONG implies strong emphasis, which is something more than 'normal' emphasis (EM). You should use STRONG if you would put extra strong emphasis on a word or phrase when reading it out loud. That means speaking louder and more slowly, often exaggerating by stressing each syllable.

    Personally, I think STRONG is rather superfluous in HTML. EM should suffice (you could nest EM elements to indicate stronger emphasis).

    I've ended up thinking that STRONG should be restricted to special elements that really should stand out. I'm loath to use it in copy text nowadays.

    Analysing your questions:
    Quote Originally Posted by aqw
    1/ A sentence where 1 or more words need emphasis => easy choice: <strong>. OK!
    I think <em>...</em> would be a better choice most of the time. If you want it boldfaced, use CSS: em{font-weight:bolder}.

    Quote Originally Posted by aqw
    2/ Navigation menu where all elements should look bold => easy choice: CSS font-weight: bold; OK!
    Yes, but here's where I can see a use for STRONG: to indicate the 'current' menu option (i.e., the page you're on). That needs to stand out, and STRONG is a good candidate. You'd use CSS to style it appropriately, of course. It wouldn't even have to be bold.

    Quote Originally Posted by aqw
    3/ A long sentence which is shortened and ended by three points
    The 'three points' is called an ellipsis, and I cannot see why it should be boldfaced. No typographic convention recommends that, AFAIK.

    Quote Originally Posted by aqw
    4/ A vertical list of hyperlinks (usual <ul> with whatever text... of no importance). Under this list is a more... hyperlink leading to a page where the user can see the whole list (the above <ul> is just the first 5 links).
    If such a link should be boldfaced at all, it's clearly a task for CSS. I doubt that you'd put strong emphasis on 'more...' if you were reading the page to someone over the phone, for instance.

    TO summarise, my recommendation (just an opinion) is:
    • Use EM to indicate emphasis in normal text. Use CSS to style EM the way you like.
    • Use STRONG to mark up very special elements on the page, which should stand out very clearly. Again, use CSS to control the presentation.
    • Use B to boldface text if there is a typographical convention that doesn't have a corresponding semantic element type in HTML.
    • Use CSS to boldface anything else. Use a SPAN with a 'semantically' named class if you have nothing else to hang the styling on.
    Birnam wood is come to Dunsinane

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Personally, I think STRONG is rather superfluous in HTML. EM should suffice (you could nest EM elements to indicate stronger emphasis).
    Indeed, that's why its definition is being changed from "strong emphasis" to "increased importance" (as aqw said) in newer HTML specs.
    Quote Originally Posted by aqw
    <span class="bold">...</span>
    You never want to use class="bold". If you mean bold, then use <b>. If you mean something that has a strong typographical convention to use bold and HTML doesn't already have an element type for the purpose, then use <b>. Otherwise, if you want bold and there is a suitable element type in HTML (e.g., instance of a defined term, citation/reference, etc.) then use that element type (e.g., <dfn>, <cite>, etc.) and change it to bold with CSS. Otherwise (if you want bold for stylistic reasons and there's no element type in HTML for the purpose) use <span> with a class name that represents the purpose or its contents (e.g., <span class="ellipsis">...</span>).
    Simon Pieters


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
  •