HTML <hr> element - new examples for lists and select

[ramiy]

Description

The article about <hr> element is basic. We can add additional examples.

[github-actions]

Preview URLs

• /en-US/docs/Web/HTML/Reference/Elements/hr

(comment last updated: 2026-01-06 10:05:31)

[estelle]

i don't htink we should be using the li examples

[ramiy]

@estelle Thanks for the feedback. You’re absolutely right, it wasn’t a good example. I’ve replaced it with a more practical one. I’d love to hear your thoughts.

[estelle]

i have been marinating over this example, and have asked a few people in the a11y community their thoughts.

Feedback was:

Use aria-hidden="true" in place of role="presentation" to completely remove the list item from the accessibility tree to keep it from being enumerated. The <hr> might have a functional purpose in that it clusters related content, but may be more confusing/annoying to a blind person than helpful, even if it is more "semantically pure."

Technically, it is a valid and accessible example, but is it a good one? Generally, if I need to create a thematic break between list items, I close out the list and open up a new list with the next "theme".

As MDN is considered gospel in many in-shop arguments over whether something is a good idea or not, I think we should omit valid content if there is a better, recommended way of doing it. By including this example, we are essentially saying "this is a good idea". So, while <hr> represents a thematic break between elements, all elements, not just paragraph level ones, it doesn't mean we need to demonstrate every use case. We should limit it to recommended use cases. I don't think we should be recommending this use case.