Commentary

The hr HTML tag needs special mention as it is too often misused as a way to draw a horizontal across the display area. In fact, hr has a specific semantic meaning that needs to be understood to use this tag properly!

The hr HTML tag represents a thematic break between paragraph-level elements such as a change of scene in a story, or a shift of topic within a section. The line on the display is actually optional and can be styled in a variety of ways using CSS.

Furthermore, there is no need for an hr HTML tag between section or h1 tags. These tags imply thematic changes themselves. Also, Thehr tag does not affect the document's outline. See MDN Web Docs and HTML Living Standard.

Usage

Classes:
none
Dependencies:
File: setup_base_html.css
Variables: none

Examples

As an example of a thematic break, consider the topic of shoes. Consider that this paragraph (plus any others following) discusses the variety of shoes available and their best use and also where to buy shoes. This paragraph then has a particular scope.

This second paragraph (plus others following this section) then discusses how to go about getting the right fit for your foot. Consideration needs to be given to foot length and also (importantly) foot width. Proper width will make walking longer distances much more comfortable.

This third paragraph could then also discuss proper shoe care. Note that although all three paragraphs discuss shoes, each paragraph goes into each topic into greater detail. Using a horizontal rule to indicate a change in topic is an appropriate use. 


                <div class="box-shadow">
                    <p>As an example ...</p>

                    <hr>

                    <p>This second paragraph ...</p>

                    <hr>

                    <p>This third paragraph ..</p>
                </div>