Re: Proposed amends to <small> element

Lachlan Hunt wrote:
> Ben Millard wrote:
>> When I've have stumbled across pages with legalese, they didn't use
>> <small>.
>
> Or this example based on Google:
>
> <p><small>©2009 - <a
> href="/intl/en/privacy.html">Privacy</a></small></p>
> (Note: Google actually uses <font size="-2"> in place of <small>)

It also uses <font size=-2> for a list of links:

* <http://www.google.com/>

Nosing around a few other footers from that site, I found:

1. <p>:
   <http://www.google.com/intl/en/about.html>
2. <div id>:
   <http://www.google.com/intl/en/contact/>
3. <td align><font size=-1 color>:
   <http://www.google.com/support/press/bin/request.py?contact_type=speakers_bureau>
4. <p>:
   <http://www.google.co.uk/support/jobs/bin/topic.py?dep_id=1054&loc_id=1113&topic=1113>
5. <p>:
   <http://www.google.com/intl/en_uk/mobile/>
6. <div class><small>:
   <http://www.google.com/accounts/TOS?loc=GB>

3 and 5 use a visibly smaller text size. Surprisingly, 6 has normal-sized 
footer text, even though it's definitely using <small>:

[[[
<div class=footer><small>&copy;2008 Google - <a
      href="http://www.google.co.uk">Home</a> - <a
      href="http://www.google.co.uk/about.html">About Google</a> - <a
      href="http://www.google.co.uk/privacy.html">Privacy Policy</a> - <a
      href="TOS?hl=en">Terms of Service</a>
      </small></div>
]]]

It's due to the stylesheet starting with this:

[[[
h1 td, h1, h2, h3, h4, h5, h6, div.topnav,
div.sidenav, div.sidesearch, div.sidequote, div.bottomnav, div.footer, 
small,
td#sidebartitle { font-family: arial,sans-serif; }
]]]

The <small> in 6 includes the copyright notice along with 5 navigation and 
utility links after it in the <small>. These links are neither copyright nor 
side comments. So the one instance I found where <small> contained the right 
type of content, it contained more content of the wrong type.

At this stage, I'm feeling more confident that the semantics for <small> are 
at odds with real content. (Studying more pages would be more accurate, 
though.)

If I'm understanding the spec correctly:

<http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element>

To rewrite the footer in 6 with the <small> element as HTML5 defines it 
(along with making the semantics of footer as a whole more precise):

[[[
<footer>
<p><small>&copy;2008 Google</small></p>
<ul>
 <li><a href="/">Home</a></li>
 <li><a href="/about.html">About Google</a></li>
 <li><a href="/privacy.html">Privacy Policy</a></li>
 <li><a href="TOS?hl=en">Terms of Service</a></li>
</ul>
</footer>
]]]

Is that about right?

With some CSS based on this it could look the same as the current page:

[[[
footer {
 color: #6f6f6f;
}
footer p, footer ul, footer li {
 display: inline;
 margin: 0;
 padding: 0;
}
footer ul {
 font-size: smaller;
}
]]]

However, what benefit does the <small> have for authors and users? The site 
doesn't style that piece of text differently from other text. Because that 
text starts with the copyright symbol, its purpose is clear without <small>.

-- 
Ben Millard
<http://projectcerbera.com/web/study/>

Received on Saturday, 17 January 2009 19:02:43 UTC