I love semantic HTML. When I see things marked up in paragraph tags that should be marked up in unordered lists, it bugs me.
So, I’ve been trying to style a long list of contact information… a pretty prominent piece of code that’s going to get used over and over. While some might do:
… that just feels wrong. Why? We are defining field types here. This is the dictionary definition usage of a definition list.
So, the ideal is:
So, for not HTML geeks, dl=definition list, dt=definition term, and dd=defintion… um… definition. So, makes much more sense than saying “This is a paragraph.” Using generic tags like paragraph (
<p>) to describe specific data when more specific tags are available is kind of like walking around pointing at things and referring to them all as “that thing”. It’s not just a thing—it’s a bird, it’s a car, it’s a river. This isn’t a paragraph. it’s a definition list.
So, back to my issue. To get this series of definition lists to look right, we had to do a lot of CSS floating. But dammit, I couldn’t nail the design. Things were still overlapping, padding wasn’t rendering, etc. I finally figured out why. When we didn’t have any data, we were returning nothing. So, it would be:
But, when I floated the
<dd>, the styling wouldn’t render correctly because it was empty. So, here’s the fix: When a field has no data, return a non-breaking space (
) instead of just nothing.
I’ll tell you what, though. Even that feels a bit dirty. I mean, my email address is not “(space)”. But the other two options involved either changing the design (seemed drastic) or ditching the semantically superior definition lists (definitely drastic). I’m happy with our little solution.
Ah, the burdens of giving a crap about semantics.