- HTML Course
- HTML Tutorial
- HTML Document Structure
- HTML Root Tags
- HTML Flow Tags
- HTML Interactive Tags
- HTML Basic Tags
- HTML Paragraph
- HTML Line Break
- HTML Horizontal Line
- HTML Images
- HTML Data Types
- HTML Attributes
- HTML Character Entities
- HTML Styles
- HTML Formatting Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML List
- HTML Tables
- HTML Forms
- HTML action Attribute
- HTML Multimedia
HTML Horizontal Line | HTML HR Tag
The HTML horizontal line is used to draw a horizontal line in a web page. It is used to divide an HTML page into different horizontal sections. Horizontal lines are required when we need to display different types of content on the same HTML page in a distinct manner. The HR element is used to represent the horizontal line. It is an empty tag. Therefore, it does not contain any content.
How to Add a Horizontal Line to a Web Page
To add a horizontal line to a web page, use the HR tag as shown in the example given below:
<!DOCTYPE html> <html> <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <hr> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
Write the above HTML code in a text editor, say "Notepad," and save it with the ".html" extension. For example, "codescracker.html," and open the file in any web browser, say "Google Chrome." Here is the output you will see:
HTML HR Style
There are multiple styles that you can apply to the HR tag to change its default appearance; for example, you can change its color, size, etc.
Now let's briefly describe, with an example, some of the famous styles that can be applied to the HR tag in an HTML document.
Change the thickness of the horizontal line
Use the "style" attribute in the manner shown in the example given below to modify the width of a horizontal line produced by the HR tag. This will allow you to change the thickness of the line.
<!DOCTYPE html> <html> <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <hr style="height: 14px;"> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
The output produced by the above HTML code should exactly be:
To make it a solid black horizontal line, unlike the above one with the same size, use the following HTML code:
<!DOCTYPE html> <html> <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <hr style="height: 14px; border-style: solid; background-color: black;"> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet.
Change the color of the horizontal line
To change the color of a horizontal line created using the HR tag, you can use the "style" attribute in a way as shown in the example given below:
<!DOCTYPE html> <html> <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <hr style="height: 14px; background-color: red;"> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet.
Create a dotted horizontal line in HTML
To create a dotted horizontal line in a web page, you need to style its border with "dotted size," in the same way as shown in the example given below:
<!DOCTYPE html> <html> <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <hr style="border: dotted 1px;"> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet.
« Previous Tutorial Next Tutorial »