Within HTML, there are multiple methods available to incorporate a horizontal line into a document, including:
- Utilizing the HTML tag
- Applying the Internal CSS techniques
Using Html
To insert a horizontal line in an HTML document with an HTML tag, it is necessary to adhere to the following instructions. By following these guidelines, the line can be seamlessly integrated:
To begin, it is necessary to input the HTML code into a text editor or open the current HTML file in the text editor where the horizontal line needs to be inserted.
<!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: Next, position the cursor at the desired location within the Html document. Subsequently, employ the Html <hr> tag at that specific point.
Step 3: Next, it is necessary to include the properties of the <hr> element, which specify the dimensions, color, and thickness of a stroke. To achieve this, the attributes for size, thickness, and color must be entered within the <hr> tag.
<hr size="" width="" color="">
Step 4 involves the necessity of defining the values associated with these attributes.
<hr size="value of size in numbers" width="value of width attribute in percentage" color="value of color">
Step 5 involves saving the HTML code and subsequently executing the file in a web 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 screenshot below displays the result generated by the HTML code above:
Using the Internal CSS
To insert a horizontal line in an HTML document using the Internal Stylesheet, the following steps should be adhered to in order to seamlessly include the line:
To begin, the initial step involves entering the HTML code into a text editor or accessing the current HTML file in the text editor where you intend to insert 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: Next, we need to position the cursor immediately after the conclusion of the title tag within the head tag of the Html document. Following this, we should specify the styles within the <style> tag as demonstrated in the subsequent block. Finally, we must input the hr CSS tag to style the horizontal line.
<Head>
<Title>
Add the Line using Internal CSS.
</Title>
<style>
hr
{
}
</style>
</Head>
Step 3: The next step involves specifying the characteristics of the hr CSS tag. Let's outline the various attributes within the upcoming section:
<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: Next, we need to insert the <hr> tag within the Html document's body to display a horizontal line on the webpage. Finally, save the Html file and proceed to open it in a web browser for viewing.
<!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 result of the HTML code above can be viewed in the screenshot displayed below: