DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 06-25-2006, 07:56 AM   #1
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default Lists for nav — semantic logic?

What is the semantic rationale for using UL/LI for navigation?

Does it enhance the importance of the nav elements in the sensors of the search engine robots if these elements are placed in a list instead of, say, a regular paragraph (P), or several of them?

I wonder about this as I go through once again the steps of distorting LIST to make it do what I want for a navigation bar: disable its markers, remove its decoration so I can use my own border, struggle with margin/padding, etc.

So I wondered if there is a reason. The generally brilliant guy on AListApart says, more or less, that this is a list so it ought to be treated as one. Is there a more substantial reason?

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 06-25-2006, 10:03 AM   #2
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,316
Default

I've never come across anyone who has got a better answer that saying it is a list therefore we should treat it as such, but as we have to make an effort to disguise it when using it as a navigation bar, it seems like a lot of work for no apparent reason.

It will be interesting to hear from others who knows more than I do!

   
__________________
www.boaakerstrom.com
Behance Portfolio
Bo Aakerstrom is offline   Reply With Quote
Old 06-25-2006, 10:40 AM   #3
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Structure

Quote:
Originally Posted by ktinkel
What is the semantic rationale for using UL/LI for navigation?

Does it enhance the importance of the nav elements in the sensors of the search engine robots if these elements are placed in a list instead of, say, a regular paragraph (P), or several of them?

I wonder about this as I go through once again the steps of distorting LIST to make it do what I want for a navigation bar: disable its markers, remove its decoration so I can use my own border, struggle with margin/padding, etc.

So I wondered if there is a reason. The generally brilliant guy on AListApart says, more or less, that this is a list so it ought to be treated as one. Is there a more substantial reason?
Semantic rationale? I am not sure what that is.

The essence to me is that the structure of a list corresponds with the structure of the navigation menu, and being pragmatic, it works. I don't see how the tag <p> for a paragraph is going to make for a structure, even as it is repeated.
dthomsen8 is offline   Reply With Quote
Old 06-25-2006, 10:52 AM   #4
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by Bo Aakerstrom
I've never come across anyone who has got a better answer that saying it is a list therefore we should treat it as such, but as we have to make an effort to disguise it when using it as a navigation bar, it seems like a lot of work for no apparent reason.
That’s about where I am.

I have once again wrestled it to the mat, but I do find myself trying to understand why.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 06-25-2006, 10:57 AM   #5
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by dthomsen8
Semantic rationale? I am not sure what that is.
Meaning: Does using LI contribute more to meaning than using some other sort of element.

When I was an ignorant and happy child, I used to set up horizontal navigation like this, using P:
| home | whatever | more of it | something else | contact |
No problem with making it work (well, I couldn’t easily have a different color for the dividers as I can using border-right and all that). Quick as a wink to type.

But then someone — Ian Petersen, I am pretty sure — persuaded me to follow the practice described at AListApart, which of course uses LI for navigation.

Quote:
The essence to me is that the structure of a list corresponds with the structure of the navigation menu, and being pragmatic, it works. I don't see how the tag <p> for a paragraph is going to make for a structure, even as it is repeated.
Oh, yes. It works. But it takes more CSS and more effort.

[having a grumpy Sunday, I guess]

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 06-25-2006, 01:52 PM   #6
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,316
Default

The example below is what I'm currently using:

<a class="nav1" href="page1.html" title="page 1">Page 1</a>

Add the class:nolink (without href) for the current page and you're away, and by creating additional classes (nav2, nav3 etc.) you could style each "button" differently if you wanted to.

Why should I need to use a list when I can make it simple?

   
__________________
www.boaakerstrom.com
Behance Portfolio
Bo Aakerstrom is offline   Reply With Quote
Old 06-25-2006, 03:42 PM   #7
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by ktinkel
What is the semantic rationale for using UL/LI for navigation?
A menu is a list of items to choose from. As simple as that.

Quote:
Originally Posted by ktinkel
Does it enhance the importance of the nav elements in the sensors of the search engine robots if these elements are placed in a list instead of, say, a regular paragraph (P), or several of them?
Nothing to do with search engines - merely with semantic, structural markup, and accessibility (turn off all stylesheets and you still have a clear structure to navigate from).

Quote:
Originally Posted by ktinkel
I wonder about this as I go through once again the steps of distorting LIST to make it do what I want for a navigation bar: disable its markers, remove its decoration so I can use my own border, struggle with margin/padding, etc.

So I wondered if there is a reason. The generally brilliant guy on AListApart says, more or less, that this is a list so it ought to be treated as one. Is there a more substantial reason?
Those are for adding prettyness and visual usability - after you've created the structural markup. But why "struggle"? Start with a good example or two and take it from there. I have a list of bookmarks, if you're interested.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 06-25-2006, 04:44 PM   #8
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by iamback
A menu is a list of items to choose from. As simple as that.

Nothing to do with search engines . . .

But why "struggle"? Start with a good example or two and take it from there. I have a list of bookmarks, if you're interested.
I suspect I have most (some, anyway) of those. It is just that it seems unnatural to me to have to torture lists to do what I want.

Prettiness? Maybe. Or maybe orderliness. Good visual design?

Well, I spent 24 hours trying to put together a site for a friend. Take a look.

And please let me know if things do not work (and what browser is involved). Thanks.


:::


Any advice appreciated.

(And if, by the wildest chance, you felt like taking a holiday in Vermont, this is the very best place.)


::

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 06-25-2006, 04:56 PM   #9
Steve Rindsberg
Staff
 
Join Date: Nov 2004
Posts: 6,712
Default

<nit,nit,nit>
You spell "and" a bit oddly here:

"the largest ones sleep five andd are winterized"

and later on the page, "cherry" is misspelled.
</nitnitnit>

Looks fine in Opera.

   
__________________
Steve Rindsberg
====================
www.pptfaq.com
www.pptools.com
and stuff
Steve Rindsberg is offline   Reply With Quote
Old 06-25-2006, 05:32 PM   #10
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by Steve Rindsberg
<nit,nit,nit>
You spell "and" a bit oddly here: "the largest ones sleep five andd are winterized"

and later on the page, "cherry" is misspelled.
</nitnitnit>

Looks fine in Opera.
Thanks, Steve. I will pass it on. The copy came mostly from my friend the client (I messed with it a bit).

I thought it was okay for a 48-hour dealie. But she will now undoubtedly make changes to the copy

Glad it looks okay in Opera. Client is hopeless; she uses only CompuServe 4!

I just asked her to download Firefox; let’s see how it goes.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Semantic HTML? ktinkel Web Design 7 08-30-2005 11:50 AM
Fetch shortcut lists annc Web Site Building & Maintenance 14 04-16-2005 12:10 AM


All times are GMT -8. The time now is 01:57 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.