How to Insert a Line in HTML

Buzz

Content

Using CSS/HTML5

Using HTML 4.01

This article explains how to create a horizontal line in HTML and CSS. You can use horizontal lines to separate paragraphs or other content on a website. The latest method to add a horizontal line involves using CSS and HTML5, but you can still use the traditional HTML tag called "HR".

Steps

Using CSS/HTML5

Open or create a new HTML document. You can edit HTML files with text editors like Notepad or development programs like Adobe Dreamweaver. Follow these steps to open an HTML document in your preferred editor:

Launch Notepad or any text editor/program of your choice.
Click on the File menu.
Select Open.
Choose the HTML file.
Click Open.

Adding a Header to an HTML Document. If your HTML document doesn't yet have a header, follow these steps to include one. The header should be placed between the "" and "" tags.

Type <head> at the top of the document.
Press Enter twice to create two new lines.
Type </head> to close the header section.

Type <style type="text/"> within the header. The style tag should be placed between the two header tags. This action lets you insert CSS code to style your HTML.

Alternatively, you can use an external style sheet for your HTML.

Type hr {. This is the CSS tag used to style the horizontal line. Add this tag after the style tag in the header section, or within an external CSS file.

Style the <hr> tag. The style rules should be typed after the "hr {" tag. You can style the line in various ways. Here are some examples:

Type width: ##px; to set the length of the line. Replace ## with the pixel value of the desired length. You may also use percentages (%) instead of pixels (px).
Type height: ##px; to set the thickness of the line. Replace ## with the pixel value for thickness.
Type background-color: ##; to apply color to the line. Replace ## with a color name, or a hex code prefixed with a hashtag (#).
Type margin-right: ##px; to set the right margin in pixels. Replace ## with the pixel value or use "auto" to center the line, distributing the remaining space equally between the left and right margins.
Type margin-left: ##px; to set the left margin in pixels. Replace ## with the pixel value or use "auto" to center the line.
Type margin-top: ##px; to define the top margin for the line. Replace ## with the pixel thickness of the margin.
Type margin-bottom: ##px; to set the bottom margin for the line. Replace ## with the pixel thickness of the margin.
Type border-width: ##px; to add a border around the line (optional). Replace ## with the pixel thickness of the border.
Type border-color: ##; to apply color to the border (optional). Replace ## with a color name or hex code.

Type } to close the style settings. This action closes the styling settings for the

tag.

Press ↵ Enter and type </style>. This action creates a new line and adds the closing tag for the style section of your HTML. The "</style>" tag is inserted after you've added the necessary HTML elements to be styled with CSS.

Insert <hr> anywhere within the body of your HTML document. The body of an HTML document is the area between the "" and "" tags. This step adds a horizontal line to the HTML content. The CSS style applied will affect any occurrence of the

tag within the HTML.

Save the HTML file. To save your document as an HTML file, change the file extension from (.txt, .docx) to ".html". Follow these steps to save your HTML file:

Click on the File menu.
Select Save As to save a new HTML file, or Save to update an existing one.
Enter the file name in the "File name" field.
Type ".html" at the end of the file name.
Click Save.

Check the HTML file. To do this, right-click the file and choose Open with, then select a web browser. You will see the horizontal line appear where you've placed the

tag. Your HTML code will look something like this:

<!DOCTYPE html>
<html>
<head>
<style type="text/">

hr {
width: 50%;
height: 20px;
background-color: red;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 5px;
border-width: 2px;
border-color: green;
}

</style>

</head>
<body>

<h1>This is the header</h1>

<hr>

<p1>This is the text separated by a horizontal line</p1>

</body>
</html>

Using HTML 4.01

Open or create a new HTML document. You can edit your HTML document using text editors like Notepad or development programs such as Adobe Dreamweaver. Follow these steps to open your HTML document in your preferred program:

Open Notepad or your preferred text editor/development program.
Click on the File menu.
Select Open.
Choose your HTML file.
Click Open.

Choose the location where you want to insert the horizontal line. Scroll down until you find a gap above where you wish to insert the line, then click on the far left side of the line to place the cursor right before the start of the line.

Press ↵ Enter twice to create a blank line. This action will move the text down to create space.

Move the cursor back to the spot where you want to insert the line. Simply click or use the arrow keys to position the cursor where you want the horizontal line to appear.

Type <hr> in the gap before the start of the line. The <"<hr>"> tag creates a horizontal line on the page.

Press ↵ Enter to insert the "<hr>" tag on a new line. This will place the <hr> tag on its own line without any surrounding code to the left or right.

Add optional attributes to the horizontal line. You can modify the horizontal line by adding properties such as length, thickness, color, and alignment. These attributes should be added right after the "hr" tag within the tag itself. Separate multiple attributes with spaces.

Use <hr size="#"> to adjust the thickness of the line. Replace # with a number (e.g., size="10").
Use <hr width="#"> to change the line's length. Replace # with a pixel value or percentage (e.g., width="200" or width="75%").
Use <hr color="#"> to change the line's color. Replace # with a color name or a hex code (e.g., color="red" or color="#FF0000").
Use <hr align="#"> to align the line. Replace # with "right" (for right alignment), "left" (for left alignment), or "center" (for centering) (e.g., align="center">)

Save an HTML file. To save a text file as an HTML document, change the file extension from (.txt or .docx) to ".html". Follow these steps to save your HTML file:

Click on the File menu.
Select Save As to create a new HTML file, or Save to overwrite an existing file.
Enter a file name in the "File name" field.
Append ".html" to the end of the file name.
Click Save.

Test your HTML file. To do this, right-click the file, select Open with, and choose a web browser. The horizontal line will appear where the "hr" tag was placed. Your HTML code will look like this:

<!DOCTYPE html>
<html>
<body>

<h1>This is a header</h1>

<hr size="6" width="50%" align="left" color="green">

<p1>This paragraph is separated from the header by a horizontal line.</p1>

</body>
</html>

Mytour's content is for customer care and travel encouragement only, and we are not responsible.

For errors or inappropriate content, please contact us at: [email protected]