Search code examples
htmlcsslistseosemantic-markup

Using Lists in replacement of Paragraph and Header tags


Researching lists, it appears they have an SEO advantage. After reading this article, particularly the section on 'definition lists', I can't help but notice that definition/description lists look very similar to a typical large body of text (header -> paragraph, header -> paragraph etc).

Obviously CSS can style the <dl> and <dt> tags as needed, so my question is:

If it gives you an SEO advantage, why isn't everyone using definition/description lists for the bulk of their online content?


Solution

  • it appears they have an SEO advantage

    What should this be, a "SEO advantage"? Good web search engines try to understand the content of a page. The page author defines the structure of the content by using HTML, which might help search engines. Now, if the content contains a list, it is a very good idea to use the corresponding HTML element for lists → here you have your "SEO advantage". In the same way, you use the heading HTML elements if you have a heading in your content. And yes, these also offer "SEO advantages" … for headings, that is.

    But this doesn’t mean that there is any benefit in using list (or heading) elements for content that is not a list (or a heading). Otherwise …

    <ul>
      <li>Why</li><li>not</li><li>use</li><li>lists</li><li>for</li><li>words</li><li>in</li><li>sentences</li><li>?</li>
      <li>O</li><li>r</li><li> </li><li>l</li><li>e</li><li>t</li><li>t</li><li>e</li><li>r</li><li>s</li><li>?</li>
    </ul>
    

    Always use HTML elements exactly in the way they are defined in the specification. Otherwise all consumers (browsers, search engines, screen readers, …) will have a hard job.

    And this doesn’t mean that it would be inappropriate to use dl in your case. It depends on your content. A dd can certainly contain p elements. But note that in HTML5 you can’t use headings in dt.