update hr element guide to indicate use for separating themes; remove … (#34612)

* update hr element guide to indicate use for separating thems; remove xhtml syntax as it is outdated and confusing to beginners

* fix title syntax

* Add resources back in for hr help page
This commit is contained in:
Morgan Adams
2019-03-08 19:02:40 -08:00
committed by Randell Dawson
parent 8635a777c6
commit de5b88265f

View File

@ -3,21 +3,16 @@ title: Create a Horizontal Line Using the hr Element
---
## Create a Horizontal Line Using the hr Element
The `hr` tag is one of the simplest HTML elements. It creates a thin horizontal line line across its parent element.
The `hr` tag is one of the simplest HTML elements. It represents a thematic change in content and creates a thin horizontal line across its parent element.
This lesson uses the `hr` tag to separate the title and content of a "card". So how do you create an `hr` element?
This lesson requires you to use the `hr` tag to separate the title and content of a "card". So how do you create an `hr` element?
```html
<!-- It's this easy -->
<!-- It's this easy. Note that it does not have a closing tag. -->
<hr>
```
This element is self-closing, but to be friendly to parsers and style checkers you should add an explicit closing marker.
```html
<hr />
```
Whichever format you choose it will create a horizontal line as in [this lesson](https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element/) on [freeCodeCamp](https://www.freecodecamp.org/). Here is a screenshot from that lesson showing an `hr` element contained within a div.
Add this tag between the title and content to create the horizontal line in [this lesson](https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element/) on [freeCodeCamp](https://www.freecodecamp.org/). Here is a screenshot from that lesson showing an `hr` element contained within the "cardText" div.
![Example hr](https://i.imgur.com/RMTqXPw.png)