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

files/en-us/web/html/reference/elements/hr/index.md

@@ -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")}}
 
@@ -56,25 +56,78 @@ 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>
-
 <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>
 ```
 
-### Result
+#### 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
+<h2>My To-Do List</h2>
+<ul>
+  <li>Task 1</li>
+  <li>Task 2</li>
+  <li>Task 3</li>
+  <li><hr /><!-- Thematic break --></li>
+  <li>Completed Task A</li>
+  <li>Completed Task B</li>
+</ul>
+
+<h2>Steps in a Recipe</h2>
+<ol>
+  <li>Mix dry ingredients thoroughly.</li>
+  <li>Pour in wet ingredients.</li>
+  <li><hr style="background-color: blue;" /><!-- Thematic break --></li>
+  <li>Mix for 10 minutes.</li>
+  <li>Bake for one hour at 300 degrees.</li>
+</ol>
+```
+
+#### 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="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
 
-{{EmbedLiveSample("Example")}}
+{{EmbedLiveSample("Thematic break between select options")}}
 
 ## Technical summary