Headers & Lists vs Definition Lists

Ace of Dubs · 2006-08-28 19:05:26

I am always looking to trim the fat off my code and have been using definition lists a lot lately in order to cut down on the divs. This has worked well for me so far, but I had a little debate with a friend of mine who insists that headers and lists are more semantic and SEO friendly. I been researching this a little and there is some truth to what he says. Apparently using headers in proper hierarchy helps search bots crawl your pages easily. I also notice that pages with headers are easier to read when CSS is turned off. Definition Lists tend to look cluttered with no styling…

Just wanted to get more opinions on this before I switch up my coding ethic.

jm · 2006-08-28 19:47:18

This is like opening a can of worms Ace. :P Have you seen the SimpleQuiz? The results are fairly divided, with one group of people who understand term and definition in the absolute sense, and another group who sees terms as ideas/concept and definitions as either defining characteristics of the concept or as related ideas.

I use both, but it depends on what I have to display. For instance, on the site I’m working on now, there’s a top bar with 3 elements: logo, issue no, and hidden skip to content. While I could use a div, a definition list shows the relationship better (in my opinion), as the unstyled output is:

<pre>
Site Name Skip to Content Issue 1
</pre>

Then for articles, the article title is in an h1 tag with the subheadings in h2, etc. For sidebars, I prefer definition lists too, as again, I think it shows the relationship between “Links” and the actual links (or Recent articles and the articles).

I think definition lists look pretty good without styling, though it would be nice if you could use block level elements in a dt. Over at ICMS the dl has minimal styling and looks good.

jakob · 2006-08-28 22:21:32

Aside from the fact that dl-lists are not possible in textile, I too like using definition lists in many cases over ul-lists, but would not use them like Jon-Michael has shown because in that particular case I don’t think the dd’s describe the dt and for me that’s what the definition list is for.

I don’t feel that the relationship between a heading and what follows is too loose, it’s just sequential rather than bound into a tag-construct – it ‘heads’ what follows.

For a more borderline situation: How about the article-list situation with a list of articles with title, excerpt and article-thumb per article, i.e. the kind of thing you would do for a list of products, holiday-tours, people, films, what-have-you… I would say that’s an ideal candidate for a dl-list as they are pretty bound-together units but it could also be done equally validly (and maybe with more seo-strength) with an h2, img and p.

Ace, I suspect you are right that the search machines give more weight to headings than dl-lists.

Mary · 2006-08-29 01:23:19

I had a little debate with a friend of mine who insists that headers and lists are more semantic and SEO friendly. I been researching this a little and there is some truth to what he says. Apparently using headers in proper hierarchy helps search bots crawl your pages easily.

Use whatever markup the content dictates, that what “semantic” means. There are no hard and fast rules, just guidelines. Google likes content that is marked up in a sensible manner.

Of course you’d never put page section headings within a definition list. That doesn’t mean you should use headings for everything either. Is it sections of text? Use paragraphs and headings. Is it a list of terms and definitions? Use a definition list.

An example: say it is a list of contact information, listing phone number, address, etc. It makes more sense to use definition lists or a table than fooling around with headings and unordered lists. Is it a plain navigation menu? It makes more sense to use a heading and an unordered list over a definition list, because there is nothing strictly to define in that kind of way. On the other hand, if it was for say, a sitemap, a definition list makes more sense. Sometimes it might be a 50-50 split, so pick the one that would be easier to style the way you want.

I also notice that pages with headers are easier to read when CSS is turned off. Definition Lists tend to look cluttered with no styling…

Every browser will see it differently, with whatever its defaults are. That’s worrying about esthetics in a situation where they don’t apply, where most people won’t see it, and those who do won’t care. Or take someone that prefers surfing with styling off, a power user – they might make up their own stylesheet which they apply everywhere. In a browser like Lynx or a screen reader, what it looks like is completely irrelevant.

Ace of Dubs · 2006-08-29 14:44:36

Thanks for clearing that up Mary. I had a feeling that the answer was somewhere in between.

Textpattern CMS

Textpattern CMS support forum

#1 2006-08-28 19:05:26

Headers & Lists vs Definition Lists

#2 2006-08-28 19:47:18

Re: Headers & Lists vs Definition Lists

#3 2006-08-28 22:21:32

Re: Headers & Lists vs Definition Lists

#4 2006-08-29 01:23:19

Re: Headers & Lists vs Definition Lists

#5 2006-08-29 14:44:36

Re: Headers & Lists vs Definition Lists

Board footer