27 lines
1.0 KiB
Markdown
27 lines
1.0 KiB
Markdown
|
---
|
||
|
|
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.
|
||
|
|
|
||
|
|
This lesson uses 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 -->
|
||
|
|
<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.
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Resources:
|
||
|
|
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
|
||
|
|
* [W3C](http://w3c.github.io/html-reference/hr.html)
|