In HTML, we can easily add the Horizontal line in the document using the following different ways:
- Using Html tag
- Using the Internal CSS
Using Html
If we want to add the Horizontal line in the Html document using Html tag, then we have to follow the steps which are given below. Using these steps, we can easily add the line:
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to add the horizontal line.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Line using Html tags
</Title>
</Head>
<Body>
This page helps you to understand how to add the line in Html document.
And, this section helps you to understand how to add the line using the Html tags.
</Body>
</Html> Step 2: Now, place the cursor at the point where we want to add the line in the Html document. And, then we have to use the <hr> tag of Html at that point.
<hr> Step 3: Now, we have to add the attributes of <hr> tag, which define the size, color and width of a line. So, we have to type the size, width, and color attribute within the <hr> tag.
<hr size="" width="" color=""> Step 4: And, then we have to specify the values of these attributes.
<hr size="value of size in numbers" width="value of width attribute in percentage" color="value of color">Step 5: And, at last, we have to save the Html code and then run the file in the browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Line using Html tags
</Title>
</Head>
<Body>
This page helps you to understand how to add the line in Html document.
<hr size="8" width="90%" color="red">
And, this section helps you to understand how to add the line using the Html tag.
</Body>
</Html> The output of above Html code is shown in the following screenshot:
Using the Internal CSS
If we want to add the Horizontal line in the Html document using the Internal Stylesheet then we have to follow the steps which are given below. Using these steps, we can easily add the line:
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to add the horizontal line.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Line using Internal CSS.
</Title>
</Head>
<Body>
This page helps you to understand how to add the line in Html document.
And, this section helps you to understand how to add the line using the Internal Cascading Style Sheet.
</Body>
</Html> Step 2: Now, we have to place the cursor just after the closing of title tag in the head tag of the Html document and then define the styles inside the <style> tag as shown in the following block. And, then we have to type the hr CSS tag for styling the horizontal line.
<Head>
<Title>
Add the Line using Internal CSS.
</Title>
<style>
hr
{
}
</style>
</Head> Step 3: Now, we have to define the attributes of hr CSS tag. So, we will define the different attributes in the following block:
<Head>
<Title>
Add the Line using Internal CSS.
</Title>
<style>
hr
{
width: 80%;
height: 2px;
background-color: pink;
margin-bottom: 7px;
margin-right: auto;
margin-left: auto;
margin-top: 9px;
border-width: 4px;
border-color: blue;
}
</style>
</Head> Step 4: Now, we have to type the <hr> tag in the body of the Html document to show the horizontal line on the web page. And, at last, we have to save the Html file and then run the file in the Internet browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Line using Internal CSS.
</Title>
<style>
hr
{
width: 80%;
height: 2px;
background-color: pink;
margin-bottom: 7px;
margin-right: auto;
margin-left: auto;
margin-top: 9px;
border-width: 4px;
border-color: blue;
}
</style>
</Head>
<Body>
This page helps you to understand how to add the line in Html document.
<hr>
And, this section helps you to understand how to add the line using the Internal Cascading Style Sheet.
</Body>
</Html> The output of above Html code is shown in the following screenshot:
