HTML - Emphasize value

Hello,

I am displaying a list of statistics where each statistic has a value
and a phrase:

8 articles published

I want to emphasize the number 8 by giving it a bigger size and making
its weight bold.

How should my HTML markup be?
<ul>
<li><span>8</span> articles published</li>
<li>...</li>
</ul>

ul li {
font: normal 0.75em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
padding: 4px 0;
}

ul li span {
font: bold 1.5em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
}

or maybe:

<ul>
<li><p><span>8</span> articles published</p></li>
<li>...</li>
</ul>

ul li {padding: 4px 0;

ul li p {
font: normal 0.75em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
}

ul li p span {
font: bold 1.5em Georgia, Utopia, Palatino, 'Palatino
Linotype', serif;
}

Or maybe some other option?

Thanks,

Why the extra P? Do you feel compelled to add an extra element or are
your really listing paragraphs!

Is there HTML markup for emphasis?
The <span> markup is by definition meaningless, semantically empty. Read the
group for a while and you'll learn about this.
Why do you set the font size 25% smaller than the user-selected size?

Here's adequate markup:

<ul class="stats">
<li><strong>8</strong> articles published</li>
<li>...</li>
</ul>

Alternatively, you could use <em> instead of <strong>, but this sounds more
like strong and global emphasis rather than the within-text emphasis that <em> "really" means. Either way you need to pay attention to typical default
rendering when designing your style sheet, which could be e.g.

.stats li {
font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
padding: 0.25em;
}
.stats strong {
font-size: 1.5em;
font-weight: bold;
}

Here font-weight: bold just confirms the typical default rendering.

By typographic tradition, bolding is normally use with sans-serif fonts, whereas italics and small-caps are normal emphasis methods for serif text.
We need not take this too seriously in web authoring (partly because small-caps isn't really supported and italics is often too unnoticeable on screen), but I think everyone should know the tradition and then _consciously_ deviate from it when appropriate.

Don't forget the possibility of coloring text or background for emphasis.
The cost nothing on the web, unlike in print.

Thank you for the explanation.

I am using Georgia because I wanted its looks on this case and 1em
looks to big for the purpose of displaying a text line with
statistical info.

Should I use Georgia only for heading?

Thanks,
:biggrin: