How to markup Statistic

I have statistics in a 50x50 box and am unsure of the best way to mark them up.

Here are examples…

$2.3 Million
in damage from the latest flood in our area.
175
Average number of cable channels on your TV.
8.34 lbs
How much a gallon of water weighs.

The surrounding box is a div. Sometimes the number is part of a sentence with the following text as in the first example. Other times the number and text are related but separate.

I need a tag around the number and text so I can style each.

Should I make everything a < p > and then make the number a < span > ?

<p><span>$2.3 Million</span>
in damage from the latest flood in our area.</p>

Or maybe make each a < p > ?

<p>$2.3 Million</p>
<p>in damage from the latest flood in our area.</p>

Thoughts?

Take a look at the following and curious to know of any improvements.

Demo: How to markup Statistic

Thanks for the effort, John, although I think you put in too much effort for what I was asking about.

Back in my OP, I just am curious what HTML markup people would use…

I would like something that makes sense from a semantics standpoint, since I can style any HTML tags to look like how I want.

See?

1 Like

For now, I decided that a DL/DT/DD would make good semantic sense…

@mikey_w

Thanks for the effort, John, although I think you put in too much effort for what I was asking about.

No problem. I save code snippets which may be of use in the future, easier than searching, codepen, etc

Fixed-width, fixed-height containers with text in them are a bad idea—especially with that much text. Rethink your layout is my advice. :slight_smile:

I was wrong. It is 200px wide and I have no height on it.

My bad!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.