Paragraphs in List Items
In this post, the author discusses the challenge of using paragraphs within HTML list items, explaining that standard lists cannot directly contain block-level elements. The post offers a solution by utilizing a combination of CSS and HTML techniques to achieve the desired formatting. It emphasizes the importance of accessibility and semantic HTML while providing a practical example to help developers implement multi-paragraph content in lists effectively.
Generated by Azure AI on June 24, 2024Here’s something that WYSIWYG editors don’t do well: paragraphs within list items. Like this (ironically, Markdown does it just fine):
This is a paragraph.
This is another one.
This is another list item.
The problem is that one you’re in a list item and you press Enter, you get a new list item, not a new paragraph. I never been able to figure out how to do this in any WYSIWYG editor, Word included. This is the HTML I’m trying to get to:
<li>
<p>Para 1</p>
<p>Para 2</p>
</li>
Some would say, just enter two line breaks, like this;
<li>
Para 1
<br/>
<br/>
Para 2
</li>
But this is wrong on both a “clean code” level, and for the fact that Para 1’s block formatting is tied in with Para 2. This is the entire reason we have the P tag, really – to separate them into two blocks.
Some folks over at Simple Bits talked about it three years ago and came to the conclusion that this is the “correct” HTML for this, but I can’t find any editor support for it.
Anyone know of an editor that supports this?