By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Lists Inside of Paragraphs

Lists are not allowed inside paragraphs, but do you really need them to be?

Edited: 2012-10-06 08:00

Semantics on this level is not really useful, and is more a waste of time than anything else – in this article we will attempt to clear up the confusion anyway, that is lists inside of paragraphs.

Some people think that lists should be allowed inside paragraphs, because there can be situations where you would want your list to be kept intact inside of the paragraph, without "breaking" the paragraph. Lists inside of paragraphs can be marked-up with a beginning colon, and each item can be separated with a comma. For example:

<p>There are 6 ways to write colors in css: hex, rgb, rgba, hsl, hsla, and color names. Which one you use is mostly down to your personal preference.</p>

The above paragraph, and the items in it, are correctly marked up – but you could also have chosen to use a list, such as ol or ul to markup the items listed in the paragraph, rather than including it in the paragraph it self. The reason you would do this is mostly for readability with longer lists, but also if you want search engines – and more – to correctly read it as a list.

Paragraphs vs OL and UL

Some people do not like that the paragraph will be "broken up", but this will happen regardless if you use a list – the latter is just more semantic, because it specifically tells that "this is a list" trough the markup used.

When you write colon, this could indicate the beginning of a list, but it could also indicate a number of other things – you would have to analyze what comes after, to be able to tell what the colon indicates. There is no reliable way a computer can tell that: "this is a list" – the easiest way to make it clear, would be to markup the items with a list.

Even a list inside a paragraph is broken up visually, you just don't think much of it. Perhaps bolding it will make it more clear:

<p>There are 6 ways to write colors in css: hex, rgb, rgba, hsl, hsla, and color names. Which one you use is mostly down to your personal preference.</p>

What you got is obviously a list inside a paragraph, its just marked-up using punctuation instead of HTML list elements. The list interrupts the paragraph regardless if you use punctuation or HTML – so interrupting the paragraph should not be a problem, it also isn't important. It doesn't really matter much in practice whether the interruption is indicated or not – but for longer lists, you may want to consider using real HTML list markup or tables. Not to indicate the break, but to make sure that search engines can tell that "this is a list", and not some attempt at keyword stuffing a paragraph.

Breaking up the Paragraph

Breaking up the paragraph in the markup is not that bad – now that we pointed out that it already happens trough punctuation. So lets show how the example that we used will be marked up using paragraphs and real list markup.

<p>There are 6 ways to write colors in css:</p>
 <li>color names</li>
<p>Which one you use is mostly down to your personal preference.</p>

For longer lists, it may increase readability to have the list marked up this way, but this of cause depends on how the list is styled. You could style the list as if it was still a "part" of the paragraph, in which case only search engines – and so on – would really benefit from having the list marked up.

Search Engines Improving

Search engines may also become better at analyzing pages – so you shouldn't be surprised if some search engine is picking up your punctuation marked-up items as a list.

When it comes to HTML however, why not use the list markup for what it was intended? Search engines might also pick up underscores as word separators, but that doesn't make it ideal to use underscores – it just gives us more choices. We are not saying that you should never use punctuation for lists, but there can be benefits to using the right markup for the right things, and you wont always be able to tell when these benefits step-in.

Final Conclusion on Paragraphed-lists

If list markup was allowed inside paragraphs, it would still add about the same amount of extra markup to the page-source, minus a few bytes. It would not be anymore semantically correct than breaking the paragraph in two, since the paragraph is already being broken visually – its just not being indicated with markup.

The only benefit from allowing lists inside of paragraphs, would be lesser markup from not having to close and open paragraphs in the source. Perhaps a little less styling – but designers often use resetting rules anyway, such as:

* {margin:0;padding:0;}

And what would it mean to lose a few bytes from your StyleSheets? It sure isn't the first place to look for optimizations.

HTML Tutorials on Lists

These are some of the HTML Tutorials on Brugbart available on the styling of lists.

  1. How to remove bullets on lists using CSS
  2. Styling of HTML Lists with CSS
  3. Nested Lists blank line "Bug"