Archive for September, 2003

SimpleQuiz › Site and Page Titles › Conclusion

This question was probably the most vague — and there certainly wasn’t a clear-cut right or wrong answer. But that’s why I like it. I enjoy hearing what others think about the relationship of the title and h1 tags.

Notable Comments

Many agreed that ceejayoz’s example was the best-case scenario, which was most like answer A:

<head>
  <title>Widget Co, Inc. | List of Widgets</title>
</head>

<body>
<div id="logo">
  Widget Co, Inc.
</div>
<h1>List of Widgets</h1>

I think I’m with ceejayoz here, and it’s certainly closest to what I’ve used in the past.

Egor Kloos:

H1 is a heading and isn’t a logo. A logo isn’t a Title and also isn’t a Heading. … A logo or even just a company name is not just a line of text, it is part of a companies assets. Treating it like it is a Title or heading and putting it in a H1 tag is a mistake…

Good points on a logo not being a heading.

Matthew Haughey:

Why put the same exact thing in an H1 on every page, making search engines think it’s the most important thing on the page, when it’s mostly just eye candy?

Search engines weigh h1 heavier than h2. Putting only the company name in there might be a waste.

Michael Z.:

But in terms of your page’s hierarchy, the <title> is like an <h0> that’s applied to the <html> element. Why repeat its content in your <h1>?

I like the h0 metaphor.

Dan R.:

How I would do it today:

<html>
<head>
<title>Page Title | Company Name or SiteName.com</title>
</head>
<body>
<div id="logo">
<p>Company Name, replaced by Logo graphic using FIR (or related technique)</p>
</div>
<h1>Page Title</h1>
<h2>Subheading</h2>
<p>Content</p>
</body>
</html>

A nice, complete example — and I agree with it all.

Summary (my take)

Here’s what I think, after hearing from you highly esteemed readers:

  • The title tag should contain the page and site title.
  • The logo doesn’t need to be a heading, and may live nicely in a div where it could be replaced with a background graphic using CSS.
  • h1 should be the title that most completely describes the document as a whole. This may or may not include the site title (again).

In the past, I have sort of tried to adhere to that. But going forward, this seems to make sense in an ideal world.

SimpleQuiz › Part V: Site and Page Titles

Our first reader-submitted quiz question from Thomas Lackner:

Q: Which is more semantically correct for a corporate web site (that does not require an image-based logo)?


  1. <div id="logo">
    Widget Co, Inc.
    </div>
    <h1>List of Widgets</h1>
  2. <h1>Widget Co, Inc.</h1>
    <h2>List of Widgets</h2>

  3. <head>
    <title>Widget Co, Inc.</title>
    </head>
    <body>
    <h1>List of Widgets</h1>

This was touched upon in the comments of the first question, but I think it would be
interesting to get people’s opinion of what a best case scenario would be for the beginning structure of a document. Obviously, logo graphics play a part in
most corporate sites — but we’re strictly talking page structure here. Thanks to Thomas for sending this in.

Bananaphone and New Sidebars

A few days ago I brought a banana with me to work and subsequently forgot that it was in my bag. Later, when I rediscovered it on the way home, I had a funny thought. What if I pretended to talk into the banana like I was on a cell phone while walking through the train station. A real conversation — and something possibly a bit louder than normal, like:

“Yeah… The McDougal file is all sorts of messed up. Smitty from accounting entered some bogus numbers on the DL5 forms… Right… We’re screwed! Listen, I gotta go, I’m about to get on the train…. Right… see you tomorrow.

The key is to make it a legimate conversation without cracking a smile. I didn’t actually try it, of course. I guess you’d have to be there.

New Sidebars

You may have noticed the new color sidebars. Thought I’d add some definition over there. If you liked the minimalism of the old-school sidebar — don’t worry. The third icon under “Switch Theme” will bring you back.

I’m still working out some final kinks, but for the most part things should be normal. I’ve found that longish pre statements cause the sidebar’s background to get stuck in IE6/Win. Longish pre statements seem to cause other problems in general. Maybe I should avoid longish pre statements.

Get ready for the next quiz question, coming soon.

Remembering

One year ago I wrote about seeing the year-old, worn pools of candle wax on my walk to the train every morning. It’s amazing, but they’re still there — 2 years later now. They are even more worn than last year, but still a constant reminder of the sad day and vigils that followed.

SimpleQuiz › When to P › Conclusion

This past question has brought up some rather interesting points. Many readers chimed in on the fact that option B was better (wrapping the content in a p tag) due to nice formatting for un-styled viewers. Others saw it unnecessary, and more saw it fit to strip away that redundant div and style a p directly.

Notable Comments

talon:

I consider div to be the “duct tape” of CSS – no semantic meaning, purely a wrapper for the grouping of block-level elements or for styling itself.

Michael Z.:

… if there’s a chance in a million that your boss will decide next month that there must be second paragraph of fluff in the footer, then go with B.

Now that’s forward thinking.

zlog:

What about <address>?

I hadn’t thought of it, but it’s a nice reminder.

jkottke:

… the responses in this thread are a good illustration of why “lorum ipsum” text should be used in such instances.

Heck yeah, and Ed Sharrer offers us the The Lorem Ipsum Generator.

Billy was the first to get at a major point I was attempting to make with this question:

Put the line of text in a p, set it’s id to “footer”, and get rid of the div.

Ah ha. Exactly. If this is just one line of text, why not add the id directly to the p tag itself? p is a block-level element as well, and div is just a generic one. A good way to trim down that code: Look at what lies directly beneath your div tags. If it’s another block-level element, look into styling that next level — directly.

For instance, if you have a form that is wrapped in a div, it may be possible to get rid of the div and let the form be the block-level element.

Oh, and extra credit goes to Doug Bowman:

I’d say the Charles DeMar he’s referencing has to do with these three words: Better Off Dead.

Right on the money.

Summary

One line of text within a div could be marked up with a paragraph, without one, or tossed out in place of styling the p directly.

Some considerations:

  • Think about the future. Will this one paragraph likely turn into two or three? Maybe it’s best to use a div.
  • If it’s always going to be one, why not bag the div and add the id to the p tag itself?
  • Look into using address for … well, addresses.
  • If you choose not to wrap a single line in paragraph tags, will this be ok for un-styled viewers?

See all past quiz questions and wrap-ups in chronological order.

SimpleQuiz › Part IV: When to P

Looking back, we’ve covered a lot of ground with just three questions, haven’t we? I realize I could go on for a dozen more questions about lists — different combinations, ordered lists, etc. I could also ask questions that are either too obvious for most, or delve too far into details for others.

So instead, here’s another topic that could just be splitting hairs again. The set-up: You have a block of text that you’re wrapping in a div (or any block-level element) and it contains just one paragraph or string of text. Note: the text used in the example is arbitrary.

Q: Are each of the following acceptable, and why (or why not)?

  1. <div id="footer">
       Copyright 2003 Charles DeMar | This text is arbitratry.
    </div>
  2. <div id="footer">
       <p>Copyright 2003 Charles DeMar | This text is arbitratry.</p>
    </div>

Extra Credit: Who is Charles DeMar?

SimpleQuiz › Heading and List › Conclusion

This question was intended to divide the results more so than the first two. While there isn’t much context included with the examples, I think what I got out of the discussion that followed is that either method is good depending on the situation.

Notable Comments

Robbert Broersma:

“I choose A, ’cause a definition-list consists of a term and a description. “Robots” is not a description of the term “A List of Stuff”.”

While this is true, others defend the use of a definition list for other applications, later in the discussion.

Dave Shea asks:

“…what constitutes a term/definition pairing? Is the term a word, can it be a phrase, can it be an image?”

A good question, and again I think is cleared up somewhat later on.

Anne van Kesteren:

“How about nested lists?”

Nested lists can certainly be useful as well, as an alternative.

Doug Bowman pretty much writes the wrap-up for me here:

“… My answer: ‘C’: depends.”

And after quoting an important sentence from the W3 specification for dl:

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

“Clearly, there are uses for definition lists far beyond the traditional term and description.”

Doug goes on to give some good examples of definition lists with multiple descriptions — creating relationships between terms and multiple descriptions. A nice example of using a defintion list for more than just term/description pairs.

Summary

Defining lists with section dividers (I’ll refrain from using the the term “headings” here) has unlimited possibilities. Using the right combination depends heavily on the context. Some things to keep in mind:

  • Definition lists can not only be used for strict term/description pairings, but also for grouping separate lists together that are related.
  • Since search engines treat heading tags with greater importance, that should factor in your decision on whether or not to use them. (The W3 spec prohibits block-level elements within a dt.)

See all quiz questions and wrap-ups in chronological order.

SimpleQuiz › Part III: Heading and List

This one might divide the answers a bit, and is surely something I’d like to know people’s opinion on. It could, however, be just splitting hairs. Is there really a big difference? Does it really matter or is it six and a half of one, half a baker’s dozen of the other? If so, we’ll move right along to the next question.

Q: Which of the following is more semantically correct?

  1. <hn>A List of Stuff</hn>
    <ul>
    <li>Robots</li>
    <li>Monkeys</li>
    <li>Vikings</li>
    <li>KitKats</li>
    </ul>
  2. <dl>
    <dt>A List of Stuff</dt>
    <dd>Robots</dd>
    <dd>Monkeys</dd>
    <dd>Vikings</dd>
    <dd>KitKats</dd>
    </dl>

See all quiz questions and wrap-ups collected in order.

SimpleQuiz › A List › Conclusion

This was another easy one — but as expected the discussion got more interesting as additional related questions were asked. The question itself is becoming secondary to the conversation happening alongside.

Notable Comments

Overwhelmingly, it was D all the way. I guess I sort of gave it away, orginally titling it “Part II: Unordered Lists”. We’ve learned some good stuff here though.

web:

Yeah, I’d go with D as well, but to be noted is the lack of KitKats in your list.

Dully noted.

Michael Z.:

There are a few situations where code like A could be used, though. Marking up a poem, for example.

Which prompted others to ask about using pre or br / to markup a poem. Tough to call,
and even the W3C uses a poem as an example of both methods.

Folkert:

Did anyone ever fall into the trap of identifying every bit of content on a page as a list, ordered and unordered? I was that close to declaring the bodytext on a page as an inline ordered list.

In fact, Doug Bowman pointed me to Tantek Çelik’s move to using a series of lists
to handle most of his weblog’s structure.

Also certainly worth a look again, is Doug’s Overused Lists? article — where he explores the differences between using pipe-delimited vs. an unordered list for navigation. The pipe-delimited method could’ve easily been option E in this quiz question, and may have divided the results a bit.

Michael Z.

I think even one item can constitute a list.

And according to the W3C, this is true.

Paul G.:

You’d have to change the stylesheet and the markup if you wanted to do something as simple as add a border around your list.

Exactly. Using a ul makes it easier to change styles with CSS.

Matt Haughey poses some questions that are far more intriguing than the quiz itself:

When should someone put something in a list instead of using line breaks? How to do screenreaders interpret lists?

To which Patrick H. Lauke responds with perhaps the most insightful information of the discussion:

… yes, they do treat lists differently from normal text broken up by line breaks. JAWS, for instance, announces that it’s an “unordered list with 5 items”. I imagine other screenreaders will provide similar information.

That to me, is a huge reason for using lists when in doubt. And after being asked whether the declaration of how many list items there are would be a hinderance to blind users, Patrick went on to offer this:

… they will know how many links there are (i.e. whether it’s only 5 items or 50), which will influence how they will choose to navigate the site.

I realize I could go on quoting everything else — because there are other great points raised as a result of another seemingly ELEMENTary (sorry) question.

Summary

A simple list of items should most likely be structured with a ul element. Why is the better way?

  • D is more easily styled with CSS without having to modify the markup.
  • Using a ul to markup lists makes it easier for screenreader users to hear how many items are contained.
  • An unordered list may be better represented in a small screen such as a phone or PDA — where unintentional line-wrapping may occurr.

SimpleQuiz › Part II: A List

I’ll try to gradually have the questions get more complicated — but judging by the amount of discussion the first one generated, there’s a lot to be said regarding just about anything. So, while the answer to this one might look as obvious as the first, there could be some additional interesting conversation on the subject.

The second SimpleQuiz question refers to creating an unordered list. Pretty straightforward, right? Let’s see…

Q: When creating a basic unordered list, which of the following is more semantically correct?

  1. Snickers<br />
    Mounds<br />
    Almond Joy<br />
    Butterfinger<br />
    Milky Way<br />
    
  2. <li>Snickers
    <li>Mounds
    <li>Almond Joy
    <li>Butterfinger
    <li>Milky Way
  3. <li>Snickers</li>
    <li>Mounds</li>
    <li>Almond Joy</li>
    <li>Butterfinger</li>
    <li>Milky Way</li>
  4. <ul>
    <li>Snickers</li>
    <li>Mounds</li>
    <li>Almond Joy</li>
    <li>Butterfinger</li>
    <li>Milky Way</li>
    </ul>