2

I'm having trouble deciding whether to use <strong> or font-weight:bold in the following situation. There is a list of various properties of a school. Each list item is the property name in bold, followed by the property value for this specific school. I understand that <strong> is used to emphasize a word or phrase in the context of the surrounding text, but I can't decide if a property name correctly fits that designation.

Here are the two options:

<!-- The class bold sets the font-weight to bold -->
<li><span class="bold">Setting:</span> Suburban</li>

or

<li><strong>Setting:</strong> Suburban</li>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
dmr
  • 21,811
  • 37
  • 100
  • 138
  • 2
    [**Here**](http://stackoverflow.com/questions/4939807/strong-vs-font-weightbold-em-vs-font-styleitalic) is a question whose answer addresses this well. – Darth Continent Dec 27 '12 at 14:29
  • @Darth I saw that question but wasn't sure how it applied to this specific situation. – dmr Dec 27 '12 at 14:31
  • 2
    A rule of thumb I sometimes consider: Would you want a screen reader to emphasize the word 'Setting'? If so, then use , otherwise, use styles. – Forty-Two Dec 27 '12 at 14:33
  • 1
    It would become a real question if you defined criteria for appropriateness. Asked abstractly, it just asks for opinions. – Jukka K. Korpela Dec 27 '12 at 17:12

4 Answers4

8

Instead of <span>, use a definition list!

Then you can style the <dt>s with font-weight: bold if they're not already.

Here's a sample of how it's used (thanks to the others who posted it!):

<dl>
    <dt>Setting</dt>
    <dd>Suburban</dd>
</dl>
paulmelnikow
  • 16,895
  • 8
  • 63
  • 114
4

If you're marking up a list of property/value pairs, you might want to consider the <dl> tag instead:

<dl>
    <dt>Setting:</dt>
    <dd>Suburban</dd>
</dl>

This actually indicates that "Setting:" is a label for "Suburban".

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
2

I would say that semantically both options are bad as there is a problem with your markup. Sounds like what you need is a dl tag instead of an ul or ol as you have a list of name - value pairs here.

<dl>
  <dt>Setting:</dt>
  <dd>Suburban</dd>
</dl>

Good description on the dl can be found here - http://html5doctor.com/the-dl-element/

Sergey Rybalkin
  • 3,004
  • 22
  • 26
0

This is totally based on your preferences. See <strong> and font-weight:bold ultimately does almost the same thing visually(unless you explicitly specify css for strong).

The difference comes in view when you try to create your mark-up semantically correct and more readable.

With <strong> you will have to write a little less and the mark-up will be more readable I think.

Praveen Puglia
  • 5,577
  • 5
  • 34
  • 68
  • 1
    "See and font-weight:bold ultimately does the same thing." That's not really true. `` indicates that the content should be emphasised. `font-weight:bold` indicates that it should be displayed with a bold font. Those two aren't the same thing. – Paul D. Waite Dec 27 '12 at 14:37
  • thats what i tried to mean by the same work. anyways edited the answer. – Praveen Puglia Dec 27 '12 at 14:41