Should ol/ul be inside or outside?

by

The short answer is that ol elements are not legally allowed inside p elements.

To see why, let’s go to the spec! If you can get comfortable with the HTML spec, it will answer many of your questions and curiosities. You want to know if an ol can live inside a p. So…

4.5.1 The p element:

Categories: Flow content, Palpable content.
Content model: Phrasing content.

4.5.5 The ol element:

Categories: Flow content.
Content model: Zero or more li and script-supporting elements.

The first part says that p elements can only contain phrasing content (which are “inline” elements like span and strong).

The second part says ols are flow content (“block” elements like p and div). So they can’t be used inside a p.

ols and other flow content can be used in in some other elements like div:

4.5.13 The div element:

Categories: Flow content, Palpable content.
Content model: Flow content.

More Related Contents:

  1. How to place elements like this
  2. comma after td entry html [closed]
  3. Vertically align an image inside a div with responsive height
  4. Angular 2 Dropdown Options Default Value
  5. Can local storage ever be considered secure? [closed]
  6. How to remove the underline for anchors(links)?
  7. Is an anchor tag without the href attribute safe?
  8. How to show text on image when hovering?
  9. Ordered list (HTML) lower-alpha with right parentheses?
  10. Bootstrap columns stacking vertically on mobile device
  11. Input with display:block is not a block, why not?
  12. Vertical align not working on inline-block
  13. How can I repeat a piece of HTML multiple times without ngFor and without another @Component?
  14. Redirect website after specified amount of time
  15. Why does my Transform snap back?
  16. How to vertically center a Bootstrap carousel-caption?
  17. Dynamically aligning pseudo element according to parent height
  18. Remove background arrow from date input in Google Chrome v20
  19. HTML – How to do a Confirmation popup to a Submit button and then send the request?
  20. CSS align images and text on same line
  21. How do I capture text from a HTML element given its id=”” from a WebView2 in VB.NET?
  22. Is there a `pointer-events:hoverOnly` or similar in CSS?
  23. What happens if the action field in a has parameters?
  24. sticky position on css grid items
  25. How to stretch div height to fill parent div – CSS
  26. Giving the script tag an ID
  27. In which order are CSS styles applied?
  28. center inside a with CSS
  29. Targeting text nodes with CSS
  30. Is it possible to reuse HTML like a template on multiple pages?

Leave a Comment