|
|
![]() |
| Thread Tools | Search this Thread |
#1
| |||
| |||
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, |
#2
| |||
| |||
Re: HTML - Emphasize value Why the extra P? Do you feel compelled to add an extra element or are your really listing paragraphs! |
#3
| |||
| |||
Re: HTML - Emphasize value 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. |
#4
| |||
| |||
Re: HTML - Emphasize value 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, ![]() |
![]() |
|
Tags: emphasize, html, value |
Thread Tools | Search this Thread |
|
![]() | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
html help | saffu khan | Software Development | 3 | 03-05-2010 01:01 PM |
XML vs HTML | technika | Software Development | 5 | 22-01-2010 09:14 AM |
How to define HTML Validator and services provided by HTML Validator | Aldous | Software Development | 3 | 22-09-2009 01:12 PM |
HTML and CSS to PDF | Miltongomes | Software Development | 3 | 18-03-2009 10:25 PM |
How do I get the HTML code to display as HTML code? | NAYASA | Software Development | 3 | 26-12-2008 01:35 PM |