SimpleQuiz Archives

SimpleQuiz › Part XVII: Conclusion

Posted at 12:02 AM

In looking over the comments on the latest SimpleQuiz (after 17 of these, I do wish I had named it something different), it seems the original goal has been skewed a bit.

Instead of focusing on why certain methods are better than others, a majority of opinons focus on the fact that certain methods are outright wrong and you should be ashamed for even thinking about them.

The hard work of the W3C can sometimes be vague regarding certain elements (perhaps they have reasons) and certainly the use of some elements can be interpreted in a variety of ways. This can be frustrating for those seeking a “correct” way to handle x, y, and z. But really, through these quizzes, we’re just trying to get an opinion on why you’d prefer one method over the other—what are the consequences?

So with that, I offer a bonus question:

Q: Which response is more beneficial?

1. ____, ____, and ____ are wrong.
2. Your method is useless.
3. I hate markup.
4. Let me tell you why I prefer _____ over ____, ____ and _____.

48 Comments

SimpleQuiz › Part XVII: Addresses

Posted at 2:31 PM

It’s been quite a while since the last SimpleQuiz—but Dave Shea has ended the drought with a question on marking up addresses.

And I quote (essentially verbatim from Dave):

Snail mail addresses are a series of details, most of which require a physical break between each line. This is very much presentational, but important presentation to reflect even in the unstyled view. What is the best way to represent an address in this format:

ABC Widgets, Inc.
100 - 1234 West Main Street
Anytown, State
Zip
Ph: 555-555-1234
Fax: 555-555-1234

1. <address>
  ABC Widgets, Inc.<br />
  100 - 1234 West Main Street<br />
  Anytown, State<br />
  Zip<br />
  Ph: 555-555-1234<br />
  Fax: 555-555-1234<br />
</address>
2. <div class="address">
  <p>ABC Widgets, Inc.</p>
  <p>100 - 1234 West Main Street</p>
  <p>Anytown, State</p>
  <p>Zip</p>
  <p>Ph: 555-555-1234</p>
  <p>Fax: 555-555-1234</p>
</div>
3. <dl class="address">
  <dt>ABC Widgets, Inc.</dt>
  <dd>100 - 1234 West Main Street</dd>
  <dd>Anytown, State</dd>
  <dd>Zip<dd>
  <dd>Ph: 555-555-1234</dd>
  <dd>Fax: 555-555-1234</dd>
</dl>
4. None of the above, or a combination of the above.

126 Comments

SimpleQuiz › Part XVI › Conclusion

Posted at 9:00 AM

Amidst all my travelling and whatnot, I realized I hadn’t written a wrap-up for the latest SimpleQuiz, Launching Windows.

The camps were rather divided on this one — with roughly half voting for a Javascript pop-up solution, and the other half voting for using XHTML 1.0 Transitional, which allows for the target attribute without incident.

The argument I found interesting, was “you should never launch links in new windows”. While there may be moral opposition to triggering unwanted events for the user, in reality, designers and developers alike will no doubt find themselves in a situation with an employer or client where this is a requirement.

So often, it’s not a moral decision, but a business one. A sometimes unfortunate reality. In a perfect world (perhaps one’s personal web site) it’s easy to stick to ideals. But in the real world it’s not. Decisions are made that may or may not involve the web designer, and the requirements must then be dealt with. Sometimes you have to make the best out of what you’ve got.

32 Comments

SimpleQuiz › Part XVI: Launching Windows

Posted at 5:24 PM

This question comes in from Keith Robinson — and it’s a good one. Recently, Keith had been working on a project using the XHTML 1.0 Strict doctype — but ran into a dilemma when he needed to launch certain links into a new window.

No worries, the target attribute is all we’ll need here:

<a href="somewhere.html" target="_blank">link</a>

But sadly, the target is deprecated and unallowed in XHTML 1.0 Strict (probably lumped in with the demise of frames). So we have a few options. We could stick with Strict and use any number of JavaScript methods to pop the new window. Or we could be rebels and use the target attribute, ignoring validation errors. Or lastly, we could switch to the XHTML 1.0 Transitional doctype and use target, staying completely valid.

Q: When using the XHTML 1.0 Strict doctype, how would you launch windows in a new window?

1. Strict doctype + JavaScript pop-up solution
2. Strict doctype + target="new" + Ignore validation error
3. Switch to XHTML 1.0 Transitional doctype + target="new"

122 Comments

SimpleQuiz › Part XV: Conclusion

Posted at 3:16 PM

For the first time, the last SimpleQuiz had over 100 comments. Wow. And once again, “lists” prove that they are the most easily debated when talking about semantic markup.

Not because it was the first comment — but because it was the first comment to suggest a method that many others agreed with, the free T-shirt goes to compuwhiz7, with this comment:

For example, you could have done this:

<ol>
  <li>
    <h2>First Step Title</h2>
    <p>First step description goes here.</p>
  </li>
</ol>

Many agreed that using <hn>s and paragraphs would be a nice way of showing the relationship between the step title and step description, while still using an ordered list. Another variation that seemed popular was the nesting of a single definition list within each list item:

<ol>
  <li>
    <dl>
      <dt>First Step Title</dt>
      <dd>First step description goes here.</dd>
    </dl>
  </li>
</ol>

While it may seem a bit weird to have a series of one-item lists — I’m never one to argue that a list can’t contain just one item.

If I could afford it, T-shirts would’ve also been handed out to (among others) Tantek, for his organized analysis that I could’ve copied verbatim as the conclusion — and also to Chris Schreib (1,2,3) for perhaps the longest comment in the history of long comments :-).

Thanks to all that commented on this one, and for (as usual) providing a fascinating discussion.

All SimpleQuiz questions and conclusions can also be viewed on one page.

13 Comments

SimpleQuiz › Part XV: Numbered List Pairs

Posted at 4:52 PM

This quiz is certainly one of those grey areas — a comparison that may have some begging that there must be a better way to spend one’s time.

Figure 1

Still with me? Good. Last December, we sort of touched on this topic, with a question on Multi-Paragraph List Items. But for this question specifically, take a look at Figure 1. The goal: to present a numbered list, with each list item containing a bold title, followed by a description on the next line.

Seems like an ordered list (<ol>) would be the best choice, but how to handle the description on the next line is the head scratcher.

I’ve run into this dilemma several times in the past few months, asking myself which is better. Again, each method may be splitting hairs, but I’m curious what you, the esteemed readers of SimpleBits thinks.

As added incentive, and to reward at least one person that, like me, actually enjoys ruminating about the subtleties of hand-crafted markup — I’m giving away one (1) free official SimpleBits T-shirt, hand-drawn by yours truly at pixeltees. Since there is no correct answer, I’ll be selecting one comment to feature in the Conclusion of this particular quiz. If your comment is chosen (for whatever reason) — you get the free shirt.

Q: Which of the following methods would you choose for marking up a numbered list of titles and descriptions?

1. <ol>
  <li>First Step Title<br />
  First step description goes here.</li>
  <li>Second Step Title<br />
  Second step description goes here.</li>
</ol>
2. <dl>
  <dt>1. First Step Title</dt>
  <dd>First step description goes here.</dd>
  <dt>2. Second Step Title</dt>
  <dd>Second step description goes here.</dd>
</dl>
3. <ol>
  <li>First Step Title
  <p>First step description goes here.</p></li>
  <li>Second Step Title
  <p>Second step description goes here.</p></li>
</ol>

110 Comments

SimpleQuiz › Part XIV: Hex Challenge

Posted at 12:31 AM

This one is purely for fun. There was going to be a prize for this quiz, however I realize I have no way of knowing whether you cheat or not. But it’s worth giving it shot without viewing source or firing up and image editor.

If you’re like me, you start to know colors by their hex code, picking them out on TV, billboards, album covers, etc. Is Oprah’s dress in #360? No, it’s more of a #690… yes, definitely in the sixes.

Match each color swatch to it’s web-safe hex code:

1.  
   1. #333366
   2. #069
   3. #369
2.  
   1. #630
   2. #993333
   3. #363
3.  
   1. #ccc
   2. #999
   3. #333
4.  
   1. #999966
   2. #9c6
   3. #693
5.  
   1. #963
   2. #c60
   3. #fc6

56 Comments

SimpleQuiz › Part XIII › Empholdics › Conclusion

Posted at 5:49 PM

This last SimpleQuiz stirred up some great opinions. A few asked when you would ever need to emphasize, embolden and italicize test all at once. But isn’t that giving up too easily?

I think Patrick Griffiths comment sums it up nicely. And although “banana” is perhaps no better than “italic”, he brings up a good point — to stray from presentational class names whenever possible.

Just Emphasis

Remember, while <strong> and <em> oftentimes render text in bold and italics respectively, it’s not a good idea to rely on this. By default, most browsers will alter text wrapped in these elements — but if you are merely using <strong> and <em> for presentational purposes, it may be time to rethink using them.

To quote the W3C:

EM

Indicates emphasis.

STRONG

Indicates stronger emphasis.

Notice there is no mention of “bold” or “italics” here — that is intended to be taken care of with CSS. It’s all about emphasis — giving more priority to text than the rest that surrounds it. Do this first — then worry about style afterwards.

17 Comments

SimpleQuiz › Part XIII › Empholdics

Posted at 1:27 PM

Emphasis, bold, italics. What if you needed to handle all three at once? (bogus method used for the preceding example ;-)

Here are three options (plus any additional scenarios you can think of). Note that the <strong> element could be swapped for the <em> element in these examples (the reverse), depending on what level of emphasis you were trying to convey.

The idea: choose <em> or <strong> to convey the correct level of emphasis, then apply the additional style that’s desired, whether that be italics or bold.

Q: Which method would you choose for handling emphasis, bold, and italics — at the same time?

1. <strong><em>Empholdics</em></strong>
2. <strong><i>Empholdics</i></strong>
3. <strong><span>Empholdics</span></strong>

   With:

   strong span {
  font-style: italic;
  }
4. <strong class="italic">Empholdics</strong>

   With:

   .italic {
  font-style: italic;
  }

52 Comments

SimpleQuiz › Part XII › Breadcrumbs › Conclusion

Posted at 11:57 PM

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:

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

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.

24 Comments

SimpleQuiz › Part XII: Breadcrumbs

Posted at 11:36 PM

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>
</p>
2. <p>You are here:</p>
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/articles/">Articles</a></li>
</ul>
3. <dl>
  <dt>You are here:</dt>
  <dd><a href="/">Home</a></dd>
  <dd><a href="/articles/">Articles</a></dd>
</dl>
4. <dl>
  <dt>You are here:</dt>
  <dd>
    <a href="/">Home</a> &gt;
    <a href="/articles/">Articles</a>
  </dd>
</dl>

76 Comments

SimpleQuiz › Part XI › Image Floating › Conclusion

Posted at 5:11 PM

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.

17 Comments

SimpleQuiz › Part XI › Image Floating

Posted at 4:14 PM

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

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
</p>
2. <div class="floatimg">
  <p><img src="image.jpg" alt="good alt text here" /></p>
  <p>Description goes here</p>
</div>
3. <dl class="floatimg">
  <dt><img src="image.jpg" alt="good alt text here" /></dt>
  <dd>Description goes here</dd>
</dl>

82 Comments

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

Posted at 7:37 PM

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.

13 Comments

SimpleQuiz › Part X › Multi-Paragraph List Items

Posted at 11:54 AM

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>
</ul>
2. <ul>
  <li>Paragraph 1
  <p>Paragraph 2</p></li>
</ul>
3. <ul>
  <li>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </li>
</ul>

61 Comments

SimpleQuiz › Smart Linking › Conclusion

Posted at 4:49 PM

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.

9 Comments

SimpleQuiz › Part IX › Smart Linking

Posted at 2:28 PM

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.

89 Comments

About the Talking About Semantics

Posted at 11:18 PM

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).

8 Comments

SimpleQuiz › Titles › Conclusion (sort of)

Posted at 11:48 PM

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.

16 Comments

SimpleQuiz › Part VIII › Titles

Posted at 11:18 PM

With this question (based on a suggestion by Shaun Inman), I’m hoping the discussion touches on a few different things that happen to be going on.

I’ll leave it at that for now, and let you all weigh in.

Q: When marking up a book title or publication, which of the following is the best choice?

1. <p>My upcoming book, <em>SimpleQuiz: Get Down With Markup</em>, will be a bestseller.</p>
2. <p>My upcoming book, <i>SimpleQuiz: Get Down With Markup</i>, will be a bestseller.</p>
3. <p>My upcoming book, <cite>SimpleQuiz: Get Down With Markup</cite>, will be a bestseller.</p>

78 Comments

SimpleQuiz › Order Up › Conclusion

Posted at 9:43 PM

Looking over the comments from the question, it appears that most saw either A or B as semantically equal. Adam Polselli brought up an interesting point though on a possible benefit to choosing option A:

I think that there’s an advantage to using A. If you style your links as “font-weight: normal”, then having the <a> tag inside the <strong> tag would override <strong>’s “bolding.”

Certainly that is something to think about, even when either order would work for you.

Good arguments were presented for either method, with some pointing to whether the link itself needed strong emphasis or just the text contained.

I’ll admit, I’m feeling a little lazy with writing this wrap-up — not because the discussion for this one was any less illuminating, but because there were many, for lack of a better term, thought provoking comments making a case for either order. Just read through these. Class dismissed.

Read all quiz questions and conclusions.

8 Comments

SimpleQuiz › Part VII › Order Up

Posted at 11:41 AM

This quiz focuses on element ordering, and is based on a suggestion from Paul Smith. When hyperlinks are coupled with inline phrase elements (such as strong, em, abbr, etc.) are there any consequences in regards to the ordering?

Q: Which of the following is more semantically correct, and are there advantages to either method?

1. <a href="http://www.simplebits.com/"><strong>The Greatest Web Site Ever</strong></a>
2. <strong><a href="http://www.simplebits.com/">The Greatest Web Site Ever</a></strong>

35 Comments

SimpleQuiz › Form(atting) › Conclusion

Posted at 10:59 PM

This was a tough one to wrap up. There are probably more acceptable possibilities with this question than with previous questions. A lot of great examples were brought to light regarding label and fieldset elements.

Notable Comments

Simon Willison:

…once I start working with forms I switch my focus from semantics to accessibility and usability.

Excellent point. It’s always good practice to ask yourself whether you’re being semantic for the sake of being semantic. Have I mentioned that I don’t like the actual word “semantic”? I don’t.

Keith:

I don’t really consider a form label and text field a paragraph so that’s out.

This was echoed through the rest of the discussion as well. However, it just might give you better results in the nonstyled version (as opposed to using a div or label or nothing).

And while using nothing might not appeal to you, MikeyC pointed out that it will not validate without a block-level element surrounding the label.

Which brings us to using fieldset, which Dave S. first suggested. The use of fieldset opened the floodgates on a host of great examples, and for simple small forms, fieldset and some CSS applied might be all you really need.

The use of fieldset was also argued a bit, back and forth. On one hand, you could see this as purely a presentational addition, and on the other hand you could quote the W3C:

The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.

I like the sound of that.

You can’t talk about forms without talking about using table to format them. Paul G.:

… it ensures that labels and inputs maintain a logical visual order and layout when CSS is off

Certainly for larger forms, when you’re dealing with multiple controls, inputs, form fields, drop-downs, etc. — tables still seem like the best way to go. You could argue either way, whether a form is tabular data — but the truth is, styling a large form soley with CSS is not a simple task, and undoubtedly will not degrade nicely.

Summary (my take)

When it comes to marking up forms, I’ll take the following into account:

• When marking up a small form with a few elements, I’ll use fieldset and CSS to style them — taking into account what the unstyled form will look like.
• Tables still are not evil. For large forms, in order to make the form useable and organized, it’s hard to beat the simplicity of a table here. CSS techniques seem to be somewhat complicated in a place where a simple table would work all around.
• In the past, I’ve used p tags to group label and matching input tags. I’m now divided on this method. For simple forms, it will ensure consistent formatting across browsers yet could be argued that it is not a paragraph of text.
• Trying to semantically structure a form makes my head hurt.

See all quiz questions and discussions in chronological order.

11 Comments

SimpleQuiz › Part VI › Form(atting)

Posted at 7:29 PM

Let’s talk forms. A lot my web design headaches are caused while formatting form items. This quiz question comes to us from MikeyC:

Q: When marking up forms, which is more semantically correct when separating form items?

1. <form>
<p><label for="name">Name:</label>
<input type="text" id="name" /></p>
</form>
2. <form>
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
</form>
3. <form>
<label for="name">Name:</label>
<input type="text" id="name" /><br /><br />
</form>

See all previous quiz questions and wrap-ups.

53 Comments

SimpleQuiz › Site and Page Titles › Conclusion

Posted at 8:59 PM

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.

13 Comments

SimpleQuiz › Part V: Site and Page Titles

Posted at 11:28 AM

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.

32 Comments

SimpleQuiz › When to P › Conclusion

Posted at 11:29 PM

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.

12 Comments

SimpleQuiz › Part IV: When to P

Posted at 10:54 PM

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?

55 Comments

SimpleQuiz › Heading and List › Conclusion

Posted at 3:48 PM

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.

4 Comments

SimpleQuiz › Part III: Heading and List

Posted at 11:58 AM

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.

43 Comments

SimpleQuiz › A List › Conclusion

Posted at 9:45 PM

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.

8 Comments

SimpleQuiz › Part II: A List

Posted at 12:31 PM

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>

58 Comments

SimpleQuiz › Headings › Conclusion

Posted at 7:21 PM

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.

6 Comments

SimpleQuiz › Part I: Headings

Posted at 11:57 AM

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 incredbly 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>

69 Comments