Archive for 2003
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?
<p>My upcoming book, <em>SimpleQuiz: Get Down With Markup</em>, will be a bestseller.</p>
<p>My upcoming book, <i>SimpleQuiz: Get Down With Markup</i>, will be a bestseller.</p>
<p>My upcoming book, <cite>SimpleQuiz: Get Down With Markup</cite>, will be a bestseller.</p>
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
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.
I’ve just purchased The Darkness new album, Permission to Land — it’s a great one, conjuring up rock’s past masters of the late 70s and early 80s. We’re talking Journey, Boston, Foreigner and Loverboy here.
Anyhow, the band is beside the point — this was the first CD I’ve purchased that has some sort of bogus copy protection built into it. Crap. Now I can’t play it on my Mac and I can’t rip it to live on my iPod. Ridiculous. There was no warning on the packaging about it being copy protected. Now I’m not sure of what to do with it. Return it? Then I have no way of listening to the 100% pure rock of the Darkness.
Has anyone else run into this dilemma?
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
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?
<a href="http://www.simplebits.com/"><strong>The Greatest Web Site Ever</strong></a>
<strong><a href="http://www.simplebits.com/">The Greatest Web Site Ever</a></strong>
Ian Lloyd over at Accessify.com just made creating CSS-based navigation lists incredibly simple.
List-o-matic (not to be confused with it’s excellent inspiration, Listamatic) is a wizard for quickly creating unordered navigation lists, while allowing you to choose from a few different CSS styles, such as my Mini-Tabs and others.
Enter a few link names and URLs, choose a style and … bingo. You have yourself some styled navigation. It doesn’t get any easier than this.
Oh, and YARRR!
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
…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.
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
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
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:
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.
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?
<input type="text" id="name" /></p>
<input type="text" id="name" />
<input type="text" id="name" /><br /><br />
See all previous quiz questions and wrap-ups.
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
Many agreed that ceejayoz’s example was the best-case scenario, which was most like answer A:
<title>Widget Co, Inc. | List of Widgets</title>
Widget Co, Inc.
<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.
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.
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.
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
How I would do it today:
<title>Page Title | Company Name or SiteName.com</title>
<p>Company Name, replaced by Logo graphic using FIR (or related technique)</p>
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:
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.
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)?
Widget Co, Inc.
<h1>List of Widgets</h1>
<h1>Widget Co, Inc.</h1>
<h2>List of Widgets</h2>
<title>Widget Co, Inc.</title>
<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.
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.
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
Get ready for the next quiz question, coming soon.