Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ramiy wants to merge 10 commits into
base: main
Choose a base branch
from
+76 −13
Open

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

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5b20020
HTML `<hr>` element - new examples for lists and select
ramiy Jan 2, 2026
af6f2e4
HTML `<hr>` element - new examples for lists and select
ramiy Jan 2, 2026
9293963
Update
ramiy Jan 2, 2026
511c482
Update
ramiy Jan 2, 2026
a4ca694
Update
ramiy Jan 3, 2026
efac8b2
Update
ramiy Jan 3, 2026
77f3887
Update example
ramiy Jan 5, 2026
a166e8e
Update example
ramiy Jan 5, 2026
ffef495
Update example
ramiy Jan 5, 2026
27ddaa1
Update example
ramiy Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 76 additions & 13 deletions files/en-us/web/html/reference/elements/hr/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ browser-compat: html.elements.hr
sidebar: htmlsidebar
---

The **`<hr>`** [HTML](/en-US/docs/Web/HTML) element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
The **`<hr>`** [HTML](/en-US/docs/Web/HTML) element represents a thematic break between elements: for example, a change of scene in a story, or a shift of topic within a section.

{{InteractiveExample("HTML Demo: &lt;hr&gt;", "tabbed-shorter")}}

Expand Down Expand Up @@ -56,25 +56,88 @@ This element's attributes include the [global attributes](/en-US/docs/Web/HTML/R

## Example

### HTML
### Thematic break between paragraphs

The following example adds a thematic break between paragraph-level elements.

#### HTML

```html
<p>
This is the first paragraph of text. This is the first paragraph of text. This
is the first paragraph of text. This is the first paragraph of text.
</p>
<article>
<p>
This is the first paragraph of text. This is the first paragraph of text.
This is the first paragraph of text. This is the first paragraph of text.
</p>
<hr />
<p>
This is the second paragraph of text. This is the second paragraph of text.
This is the second paragraph of text. This is the second paragraph of text.
</p>
</article>
```

<hr />
#### Result

{{EmbedLiveSample("Thematic break between paragraphs")}}

### Thematic break between list items

The `<hr>` tag can be placed within a list item for visual separation, to create a separator between sections of a list.

#### HTML

```html
<ul>
<li>Cut</li>
<li>Copy</li>
<li>Paste</li>
<li role="presentation"><hr /></li>
Copy link
Member

@estelle estelle Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<li>Delete</li>
</ul>
```

<p>
This is the second paragraph of text. This is the second paragraph of text.
This is the second paragraph of text. This is the second paragraph of text.
</p>
```css hidden
ul {
list-style-type: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 100px;
margin: 0.75rem;
padding: 0.75rem;
border: 1px solid lightgrey;
}
hr {
margin-block: 0.2rem;
color: lightgrey;
}
```

#### Result

{{EmbedLiveSample("Thematic break between list items")}}

### Thematic break between select options

The `<hr>` element is allowed inside a `<select>` element to create a visual separator between `<option>` elements.

#### HTML

```html
<select>
<option value="">--Choose an option--</option>
<hr />
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<hr />
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
```

### Result
#### Result

{{EmbedLiveSample("Example")}}
{{EmbedLiveSample("Thematic break between select options")}}

## Technical summary

Expand Down