What do you think? em, abbr, span, or other?

HTML & CSS
1

Hello, I have this in my markup…

<div><a href=“”></a>7-12 of 17</div>

The anchor has display inline block and vertical align middle. Webkit needs a tag wrapped around the bare numbers there and given the same (inline block and vertical align middle) in order to “middle” correctly. As a whole my markup is very minimal so I can get away with just targeting everything by tag not id. But I’ve run out of the usual tags to use. So in this case, whats the most appropriate tag to wrap these numbers in? em, abbr, span, or other?

Thanks!

2

oopps scratch that. vertical align bottom on the anchor lined up everybody correctly as is.

3

But, if you did need a tag, from what little I can tell of the content (is this a pages list?), span would likely be best.

4

yeah thats what I would have used but the span was already targeted so I was looking for another. I guess you could use abbr. Numbers could be an abbreviation for the spelling version. But no worries, I’m good as is, didnt need anything.

5

Numbers could be an abbreviation for the spelling version.

That confuses me. I don’t see any abbreviations. But I do see an empty anchor, so maybe it was you simplifying your code example.

6

There is no ABBR and no EM needed and if anything it would be the title attribute if you considered the user incapable of understanding a numeric digit.

7

7-12 of 17 could be an abbreviation for - seven through twelve of seventeen

8

Hm, personally I think that’s stretching it, but, no biggie.

There is no ABBR and no EM needed and if anything it would be the title attribute if you considered the user incapable of understanding a numeric digit.

Title locks out the mouseless who don’t have screen readers. Then again, if the user can’t understand numbers, they probably can’t understand anything on the site anyway : )

9

Yeah. I used to just be willy-nilly with my tags. P here b there. But I’m trying to use more meaningful tags of late. As you said, span is prob most appropriate.

10

As a typography fiend seeing a hyphen in place of a en or em dash gets under my skin.


<div><a href=""></a>7 &ndash; 12 of 17</div>

Then if you really want to do it correctly use a thin space on the left and right.

11