Archive for ‘simplequiz’ category

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>

SimpleQuiz › Headings › Conclusion

What seemed like an innocent little question to start off with, eventually become more of a informative discussion. So far so good, and I’m excited to continue on with this series. Note: Through the magic of Movable Type, I’ve set up a permanent spot for the quiz, which will collect all questions and wrap-ups in chronological order.

So what did we learn from Part I: Headings? I’ll go on to pull out some notable comments and then attempt to summarize what people thought would be Good(tm) Markup practices. Remember, one nugget to get out of this is that there is no one right way to do something.

Notable Comments

The majority agreed that B was the more semantically correct choice. Here are some interesting comments that followed.

vlad:

…if the site is being viewed with a device or browser with no css support, the heading will still look like a heading

Sunny:

B is the semantically correct approach although A will be valid mark-up.

And there I think Sunny nailed it, getting right to heart of Jason Kottke’s post.

Paul G.:

Using <p><b>…</b></p>, while perfectly valid, is semantically awful. It conveys no meaning about what is between the tags.

Andre Leistner:

It’s interesting to see a quiz on semantic markup being marked up using non-semantic markup (div and span). You could have used an for the choices.

Heh heh, oops. Absolutely correct, and quickly resolved. :)

The conversation moved briefly over to the topic of where to put the page title — does the site title belong in an <h1> or does the page title make more sense?

Bob:

I try to approach it in this fashion: If viewed completely unstyled, does the page look more or less like an outline, with headings, subheadings, etc.?

Paul G.:

Imagine printing out the document with no styling. The first thing you expect to see … when you look at the page is the document title. It makes sense to look at the page and see “Dancing Habits of the Capybara” or even “Capybaras.net – Dancing Habits of the Capybara”, but if all you see is “Capybaras.net”, you cannot immediately deduce what the document is about or whether it is relevant to what you are looking for…

Really great point here I think.

kirkaracha (easily the best name):

The W3C recommends that the h1 be the same as the title. I interpret this to mean that both should refer to the title of the document, not the site.

It’s hard to argue with that.

Summary

In conclusion — why B?

  • We know that an h1 tag will degrade nicely and look better in all browsers and devices.
  • It describes what’s between it better than the other choices. It’s more meaningful.
  • Search engines will look to h1 for keywords over p, b or span tags. And even more of a reason to put your page title in there.

What goes in an h1: site title or page title?

  • Think of your page as an outline — be conscious of the un-styled structure.
  • Paul Gs test: if someone were to print the document, what should show up as the largest top heading? I’ll say page title.

Stay tuned for the next question.

SimpleQuiz › Part I: Headings

In response to Jason Kottke’s post on semantics and markup, I thought I’d try out a new series here called SimpleQuiz (I know… but it’s better than “Markup Quiz” or “Web Standards Quiz”). The objective is to ask some questions about markup and generate some discussion about preferred methods.

I may very well become either too busy or bored to continue these on a regular basis, but we won’t know until we begin. The hope is that these questions and answers would become useful little bits of information. I also won’t pretend to be the authority on any of these subjects. I may very well be asking the question because I’d like to hear how others would handle it as well.
So here goes… the first one is a doozy. Sure it’s incredibly obvious — but we have to start somewhere, and should probably make no assumptions.

Q: Which of the following is more semantically correct? (For the title of a document)

  1. <span class="title">This is a Title</span>
  2. <h1>This is a Title</h1>
  3. <p><b>This is a Title</b></p>