Archive for ‘simplequiz’ category

SimpleQuiz › Part XII › Breadcrumbs › Conclusion

Looking over over the last SimpleQuiz, one of the comments that struck me was one by Darrel:

In terms of an anology, it refers to leaving a trail based on where you’ve been. Very few navigation systems actually do that though. Rather, they show you were you are in relation to the site structure.

Great point — and one that I think rules out a few of the other markup possibilities. An ordered list would be appropriate only if the list of links were an accurate trail of where the user has been. This is oftentimes not the case, as Darrel notes.

The other interesting method that was mentioned was the nesting of unordered lists to convey a hierarchy of directory structure. This could be the most semantic way of presenting the list of links — but as many suggested, it’s a bit of a markup overkill.

As Doug said:

…no one really wants to code this:

 <li><a href="/">Home</a>
   <li><a href="/articles/">Articles</a>
     <li><a href="/articles/file.html">Title</a></li>

It accurately portrays site structure … And nested lists represent a snippet of a site map in outline form.

Here’s a case (and this happens from time to time) where perhaps the method that’s more semantically rich, adds way more code than really necessary. And it’s got me scratching my head saying “it’s all about compromises again”.

If semantic purity is your goal, then nested lists may be the way for you — if simplicity is what you’re after, something like Method A might work.

The past few conclusions have me sounding like broken record — that it’s all about balance: Semantics vs. practicality vs. simplicity vs. requirements. Somewhere in the middle is usually just right.

SimpleQuiz › Part XII: Breadcrumbs

Breadcrumb navigation. This is an interesting topic, sent in by Thomas Baekdal. Breadcrumb navigation is commonly used as a method for showing the user where they are within the structure of a site — and giving them an easy way of getting back.

Marking up a breadcrumb trail of links could be handled a variety of ways — and I’m interested in hearing people’s thoughts on how they’re best presented structurally, keeping in mind an unstyled version as well.

In addition to the four methods below, I’m sure there are countless other scenarios. Don’t be afraid to suggest a “method E”.

Q: Which is the best method for marking up a breadcrumb trail of links?

  1. <p>You are here:
      <a href="/">Home</a> &gt;
      <a href="/articles/">Articles</a>
  2. <p>You are here:</p>
      <li><a href="/">Home</a></li>
      <li><a href="/articles/">Articles</a></li>
  3. <dl>
      <dt>You are here:</dt>
      <dd><a href="/">Home</a></dd>
      <dd><a href="/articles/">Articles</a></dd>
  4. <dl>
      <dt>You are here:</dt>
        <a href="/">Home</a> &gt;
        <a href="/articles/">Articles</a>

SimpleQuiz › Part XI › Image Floating › Conclusion

Looking back on SimpleQuiz Part XI, I started thinking more about seeing an image and caption unstyled. Which option best shows the relationship between the image and its caption?
Here’s a comparison of the three methods presented, without any CSS applied to them.
Pure semantics aside, I have to say I like the look of option A when unstyled. However, when adding CSS to the mix, I have less precise control over the style of the caption.
Option B looks very odd because of the paragraph separating the image and description. Many suggested option B, sans the paragraph surrounding the image, and this would look about the same in most browsers.
Option C seems to be a semantic improvement — plenty of control over each item and it’s arguable whether it’s an appropriate situation for a definition list (I say.. why not?). The indentation is a bit weird — but we shouldn’t concern ourselves with looks when we’re talking about semantic markup. Or should we?
Oftentimes, I keep an unstyled “view” of the document in mind when marking things up. How will this look in a text browser — or in one where CSS is not present or supported. It’s helpful at times in determining the best way to handle a particular bit of markup.
So in this case, I might choose option A — because visually it shows the relationship between the items better than the others. But I suppose this is bad semantics. Or maybe just another case where we don’t have the “perfect” set of defined elements for this (very) specific job.
See past SimpleQuiz questions in the archive.

SimpleQuiz › Part XI › Image Floating

First things first, many thanks to all of the readers of SimpleBits for making 2003 a great year. It’s been fun chatting about standards-compliant design, the subtlties of minute markup comparisons and… beer. I’m already looking forward to continue with bigger, better things in 2004.

Figure 1
Figure 1

Mike Papageorge had written in a while back with a SimpleQuiz suggestion concerning the floating of an image and caption within content.
I thought it may be an interesting bit of markup to discuss, so I’ve whipped up the following question.

But first, take a look at Figure 1. Ha! By floating Figure 1, I’m demonstrating precisely the situation that this question refers to: An image floated to one side, with a descriptive caption underneath. Content text will wrap around the entire package.

Now, on to the question. While I’ve illustrated only three methods, there are surely many more combinations that could achieve simliar results. Try to take into account how an unstyled view of the different methods would appear as well.

Q: Which method makes the most sense when floating an image and caption within a body of text?

  1. <p class="floatimg">
      <img src="image.jpg" alt="good alt text here" /><br />
      Description goes here
  2. <div class="floatimg">
      <p><img src="image.jpg" alt="good alt text here" /></p>
      <p>Description goes here</p>
  3. <dl class="floatimg">
      <dt><img src="image.jpg" alt="good alt text here" /></dt>
      <dd>Description goes here</dd>

SimpleQuiz › Part X › Multi-Paragraph List Items › Conclusion

I’ve been meaning to recap the last SimpleQuiz question for awhile now. You know, the Holidays…

Looking back on multi-paragraph list items, it appears that (to me) option C might be the way to go — using CSS to modify any default top paragraph padding (as Mark Newhouse suggested using a descendant selector). Using the :first-child pseudo-class would also work, but with mixed support.

But aside from the styling, the real debate could be, if you were to use C — would you wrap single paragraph list items in paragraphs as well? Seems like overkill, yet strange to have only mult-paragraph items use paragraph tags and the rest just live in <li>s.

I’m not intending to restart the debate — just some holiday fruitcake for thought.

To me, a list item is just that — a list item. Not necessarily a paragraph of text. It would seem extraneous to add paragraph tags to all short items for the purpose of making the multi-paragraph items feel more at home. Is there anything wrong with having paragraph tags only on multi-paragraph list items and not single items? I don’t think so, but when I re-read the question, it sort of strikes me as unecessary to ask.

Yet, it could also be the time of year. The time where it’s hard to get your mind back in the swing of things. When I all I really want to do is watch bad movies while making the best selection I can from an assortment of Russell Stover chocolates.

SimpleQuiz › Part X › Multi-Paragraph List Items

This quiz question comes courtesy of Matt Haughey and it’s certainly one that I (and maybe you) have wondered about.

The scenario is familiar — marking up multiple paragraphs within the same list item. There are visual consequences with any of these to take into account, and I’ll refrain from mentioning anything until after the comments have started. I’d love to hear what everyone’s thoughts are.

Q: When marking up multiple paragraphs within one list item, which method makes the most sense?

  1. <ul>
      <li>Paragraph 1<br /><br />
      Paragraph 2</li>
  2. <ul>
      <li>Paragraph 1
      <p>Paragraph 2</p></li>
  3. <ul>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>

SimpleQuiz › Smart Linking › Conclusion

Certainly some great discussion on smart hyperlinking methods. Many like B over the other three examples. I think I like this one best as well. The link is surrounding the description of exactly what it’s pointing to. Using a title attribute can be helpful if for some reason the text you’re using isn’t descriptive enough, or to name the document you’re linking to.

Option C’s use of “Click here” text was a hot topic of discussion as well. I tend to think, in general, it’s not always a good idea for the following reasons that many of the readers shared:

  • Not everyone uses a mouse to navigate a web page, therefore the word “Click” doesn’t make sense for every situation.
  • If “Click here” text is used repeatedly on a page, a screenreader that reads off a list of links found on that page would basically be saying “Click here. Click here. Click here.” over and over again. Being more descriptive about what the link is will help.
  • Visually scanning the page for links would reveal little about what is being linked to.

Another thing to keep in mind, and this was brought a few times, is how being descriptive when building links can help search engine spidering.

SimpleQuiz › Part IX › Smart Linking

To mix it up a bit, I thought I’d offer this quiz question from Egor Kloos. It sort of borders on the topic of usability — finding the best way to hyperlink something in context.
What method will make the best impact? What we link, and where, is a simple way of improving a site’s readability. But what do you think?

Q: When linking to something that appears more than once within a sentence, where is the best place create that link?

  1. <a href="#">The W3C's section on HTML has been used by many designers as a reference to build better sites.</a>
  2. The <a href="#">W3C's section on HTML</a> has been used by many designers as a reference to build better sites.
  3. The W3C's section on HTML has been used by many designers as a reference to build better sites. <a href="#">Click here</a>.
  4. The W3C's section on HTML has been used by many designers as <a href="#">a reference to build better sites</a>.

See previous quiz questions and wrap-ups in the archive.

About the Talking About Semantics

I feel the need to take a time-out and regroup in regards to the SimpleQuiz.

What’s the point in arguing about semantics? XHTML is not a semantic language.

I agree — it may never be a purely semantic language. I sort of wished I had never used the word “semantic” in the questioning of the quizzes. What we’re trying to get at here is whether one method of markup has any benefits over another. That’s it. Call it semantics, call it preferred methods, call it advantages and disadvantages, etc. The bottom line is that talking about this stuff (as mundane and ridiculous as it can get) can be beneficial.
Sure, at times we’re all splitting hairs and to some it may seem like an absolute waste. But, call me crazy, it’s fun talking about the million different ways to markup a list or a form or a heading — and hearing how others may do it differently. I also hope to broaden the questions to handle CSS methods and tricks.
So, the intention is to question the whole idea of semantics, when they’re helpful or when they ain’t — not to preach some “golden way” of writing web pages. I’ll be the last to want to adhere to a single way of marking up XHTML. Sometimes, a tag is a tag is a tag, and instead of worrying about what’s right we should go outside and toss the football around (or kick the football around for all you non-Americans).
Allright. Had to get that off my chest. Now back to work. The next quiz will be on how XHTML files with odd numbered byte sizes are more semantically correct. (Just kidding).

SimpleQuiz › Titles › Conclusion (sort of)

Where do I begin? This one has no obvious answer, and didn’t really intend to. In fact, very few of these questions really intend to have a definitive answer. And the following is my attempt to absorb the illuminating comments (and they are always illuminating) and make some sense of them.

Let’s get right to it. Book titles. Right. The title of a book. Think about seeing a book title in print — in a magazine or another book. A book title is normally set in italics. It’s a visual clue. It’s strictly presentational. Now think about a book title on a web page. We still want that visual clue — italics, but we also want all browsers and devices to know that this is a book title as well.

Moby Dick. I just used i. Is that any good? Well, using i is strictly presentational, it’ll give us the italics we want, which is good. But:

The only real difference is that i‘s nomenclature disregards all but visual browsers. (full comment)

When using i, visual browsers will render the book title in italics, but others may not.

Looks like B is out.

But non-visual browsers will recognize em you say? Great! But, do you really want the the title of a book to be emphasized (read faster and/or louder)? Probably not, so A is out — although I’m plenty guilty of using it.

So what about cite? Many dispute the relationship of cite in regards to a book title — if you’re simply stating the title of a book, are you really citing it? I suppose I could go either way on that one. One could argue that you are, in fact, citing the book title even when stating it without following quotations. cite also has the benefit of being rendered in italics in most (?) browsers — by default and without additional CSS rules. How many I could not tell you definitively, and that would be an interesting tidbit of information.

A fourth option would be to create a custom class and attach it to the span tag such as <span class="title">This is a Book Title</span>. But this to me is the same as using i — strictly presentational and if you wanted to be hilariously ridiculous you might point out that it would cost you a few more bytes for the span tag and associated CSS rule. Silly, but…

So the moral of this quiz question is: use one of the four methods and move on. Each of them has their respective advantages and drawbacks. Take those into account in the real world, make a choice and feel good in knowing that you may have some extra information on why you made it.