Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 25-10-2008
Member
 
Join Date: Feb 2008
Posts: 130
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,
Reply With Quote
  #2  
Old 25-10-2008
Member
 
Join Date: Apr 2008
Posts: 193
Re: HTML - Emphasize value

Why the extra P? Do you feel compelled to add an extra element or are
your really listing paragraphs!
Reply With Quote
  #3  
Old 25-10-2008
Member
 
Join Date: Apr 2008
Posts: 142
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.
Reply With Quote
  #4  
Old 25-10-2008
Member
 
Join Date: Feb 2008
Posts: 130
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,
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "HTML - Emphasize value"
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


All times are GMT +5.5. The time now is 12:54 PM.