A Question Of HTML Part 1 - De-emphasis

5th January 2004 · Last updated: 21st December 2023
 

Comments

Below is the HTML I wrote yesterday to style archived links from the side menu:

<li><a href="">Link</a> - Description
<br /><span class="linkcaption">Site Name | Date</span></li>

Here is the CSS that styles the span on the second line:

.linkcaption {font-style:italic;}

Here is the page the code is taken from:

http://www.designdetector.com/links.php

I didn't want to use <i> to italicize the text in the span. Why? Because I might decide to change the style later, perhaps to bold, or plain text. That would mean changing masses of lines of HTML. Nor did I want to use <em>. Why? Because to me it seemed wrong. Em stands for "emphasis". But I didn't want to emphasise the text. To me that says 'make it stand out' - but I wanted to subdue it - or de-emphasise it! In this case a span seemed to be the only choice.

I could have used <em> and styled it. Or I could have used other methods. My main concern now is that there are a lot of spans on the page, and <span class="linkcaption"> seems like a lot of extra characters compared to <i>. So I'm opening the debate to everyone here. Which approach would you choose? Which offers the best solution for the longterm maintenance of a site? Does a lot of code matter, or should I go for the leanest HTML possible?

(Update 28 February 2004 - had to remove the exact code from the HTML above and use generic text instead. IE6 was moving the main column down below the menu text when the browser window was reduced below 1024 pixels wide. This was due to a long link used in the HTML example before. It still breaks at less than 844 pixels wide though!)

Comments (6)

Comments are locked on this topic. Thanks to everyone who posted a comment.

1. csant:
   hi,
   
   there are two ways you could go about it: the "pure", and the "compromising"...
   
   *COMPROMISING*
   markup:
   
   <li><a href="http://daringfireball.net/2004/02/
   omniweb_5_public_beta">OmniWeb 5 Public Beta</a> - Superb review of an exciting browser with some smart features
   <br />Daring Fireball ¦ 4 February 2004</li>
   
   css:
   li { font-style: italic; }
   li::first-line { font-style: normal; }
   
   this one works with basically any browser. you have much more elegant markup and no span cluttering...
   
   nevertheless you could get rid also of those br:
   
   *PURE*
   markup:
   <li title="Daring Fireball ¦ 4 February 2004"><a href="http://daringfireball.net/2004/02/
   omniweb_5_public_beta">OmniWeb 5 Public Beta</a> - Superb review of an exciting browser with some smart features</li>
   
   css:
   li::after {
   content: attr(title);
   display: block;
   font-style: italic;
   }
   
   this one is the "cleanest" of all - has the draw-back that IE will not cooperate. but it has a pretty good fall-back: all browser will in any case display the title when :hover as a tool-tip.
   
   personally, i'd go for the *pure* option...
   
   c
   
   [ p.s. i hope i did all proper escaping and your comment parser will pass it... ]
   
   Posted on 6 February 2004 at 10:22 am ¶
2. csant:
   have uploaded a sample for each:
   http://csant.info/test/li-caption.htm *PURE*
   http://csant.info/test/li-caption-2.htm *COMPROMISE*
   
   and noticed a possible bug in Opera: the documents are sent as application/xhtml+xml - and Opera seems not to recognize ::first-line when the xml parser is called (it does properly when checked locally, in text/html)
   
   c
   
   Posted on 6 February 2004 at 10:39 am ¶
3. flump:
   i tested those documents and the second (compromise) only works in ie 5.5+
   
   the first obviously doesnt work at all using css content.
   
   how about using nested list? but making the sub-list not show the bullets? that could be an option.
   
   but i suppose that would require naming the <li> a class?
   
   Posted on 6 February 2004 at 3:22 pm ¶
4. Chris Hester:
   Csant, your solutions are genius! I'd never have thought I could get the styles I wanted without ANY tags around the bottom line!
   
   I prefer your Compromising solution, as it works in IE/Win. Thanks for making the two example pages as well.
   
   Great work!
   
   Posted on 6 February 2004 at 10:09 pm ¶
5. Chris Hester:
   I implemented the 'Compromising' idea but came across a serious flaw. If you reduce the browser window small enough, long lines of text on the first line spill over onto the second line. The text on that line therefore gets italicized!
   
   Now I see the ONLY way to mark up the last line is with <em>. You can't guarantee where the line will be in the browser - it might be on the second, or the third line, or even the fourth. Hence you have to put tags around it and style it that way.
   
   Posted on 9 February 2004 at 8:15 pm ¶