How to Add a Line in HTML: Design and Layout Techniques

Are you looking to add a line in your HTML code? Here’s how to add a line in HTML following simple steps!

To add a line in HTML, you can use the horizontal rule tag, the <hr> tag. This tag breaks or divides the text, highlights important words or paragraphs, and makes the page more presentable. You can add the <hr> tag in two ways – either with the <hr> tag or using CSS properties.

So there you have it! Adding lines to your HTML pages using the <hr> tag is a simple process that can add much visual appeal to your website. Keep reading for more information on adding a line in HTML.

Table of Contents

Add Lines before and after a text in HTML

Let’s see How one can add Horizontal Lines before and after a text in HTML, along with examples. Here we have 2 ways to use the horizontal rule tag: one is using the <hr> tag, and the second is using CSS properties.

We will first see the use of the simple <hr> tag.

Example of <hr> tag before the text

Through this, you can add line in HTML before the text:

<html>
<head>
<title>Horizontal line</title>
</head>
<body>
<p>HORIZONTAL LINE BEFORE TEXT</p>
<hr>
<p>This is an example of a horizontal line before text.</p>
</body>
</html>

Example of <hr> tag after the text

Through this, you can add a line in HTML after the text:

<html>
<head>
<title>Horizontal line</title>
</head>
<body>
<p>HORIZONTAL LINE AFTER TEXT</p>
<p>This is an example of a horizontal line after text.</p>
<hr>
</body>
</html>

<Hr> tag

From the above examples, we saw how we used the <hr> tag separately before and after the text in HTML. Lets us now look at the use of the <hr> tag before and after the text together with an example.

Example of <hr> tag

Through this, you can add line in HTML tag:

<html>
<head>
<title>Horizontal line</title>
</head>
<body>
<p>HORIZONTAL LINE</p>
<hr>
<p>This is an example of a horizontal rule tag before and after text together.</p>
<hr>
</body>
</html>

Attributes

Here we will use various attributes of the <hr> tag and see how it turns out. Although the attributes are only supported in HTML4 and not in HTML5, we still will see the use of these attributes through examples and how they style our lines before and after the text.
Under these examples, we will see the use of attributes like Width, which specify the Width of the line, and Size specifying the height. Align, which helps align the line to center/left/right, and Color through this one can set the Color of the horizontal line. Using them according to your choice or wish will style the makeup page accordingly.

Example of <hr> tag with its attributes

Through this, you can add a line in HTML with its attributes:

<html>
<head>
<title>Horizontal line</title>
</head>
<body>
<p>HORIZONTAL LINE</p>
<hr width="500px"
size= "10"
color= "green"
align= "left">
<p>This is an example of a horizontal rule tag used before and after text using various attributes.</p>
<hr width=" 90%"
color= "green">
</body>
</html>

CSS Properties

We will now see the use of the <hr> tag by using the CSS properties. Many of you will question while reading this article: What are these CSS properties? Well, nothing to worry about. CSS is Cascading Style Sheet. This is a style sheet language that helps one to style the makeup page layout. For example, in the <hr> tag, one can style the border type, align, Color, and Width, and choose the background color.

Example of <hr> tag with the use of CSS properties

Through this, you can add a line in HTML with CSS properties:

<html>
<head>
<title>Horizontal line</title>
</head>
<body>
<p>HORIZONTAL LINE</p>
<style>
/*dashed green border*/
hr. one {
border-top: 2px dashed #007810;}
</style>
</head>
<body>
<p>This is an example of a horizontal rule tag using CSS properties.</p>
<hr width=" 90%"
color= "green">
<p>This is an example of a horizontal rule tag using CSS properties.</p>
<hr class="one">
</body>
</html>

FAQs

How do you put a line between text in HTML?

To put a horizontal line between the text, you can use the (hr) tag. With this, a horizontal line will be created.

What are the attributes of (hr) tag?

The attributes of the (hr) tag include the line's size, alignment, width, color, etc.

Conclusion

Using HTML and its tags and attributes can be difficult, but we made sure in the above article that the process is smooth and easy for you with your subsequent HTML web page work. Sometimes the straightforward steps can skip from our minds, and we struggle to recall them, or in the end, we give up on the task instead of a simple try, so here we are to help you with your problems and give you the best solutions.

Therefore I hope you must have known now how to add a line in HTML.

Learn how to Display HTML Images And Text Side By Side.

StrobeCorp