HTML Line Breaks
How to go to next line in an HTML Document?
When you want to add a new line in your HTML page you can use < br > tag, < br > tag is not to create a paragraph.
HTML Source Code :
<html>
<body>
First line <br> Second Line <br> Third Line <br> Forth Line
</body>
</html>
A line break ends the line you are currently on and resumes on the next line , and it does not require a closing tag.
Some people uses multiple BR tag for creating vertical space in the HTML page , it may not work in all browsers. You can use < br > tag and < br/ > tags, both are supported in all major browsers.
HTML horizontal line
How to draw a line in an HTML Document ?
< hr > tag is used to draw lines across the page and it has no end tag like < br > tag.
HTML Source Code :
<html>
<body>
Before Line
<hr>
After Line
</body>
</html>
You can use < hr > tag and < hr/ > tags, both are supported in all major browsers.
HR Element Attributes
You can set attributes like noshade , size , color , width , and align attributes to < hr > tag.
Noshade :
Noshade attribute create a flat look solid line.
< hr noshade >
Size :
The default line thickness is 2, you can change the size attributes to change the thickness of the Line.
HTML Source Code :
<html>
<body>
One
<hr size=2 noshade>
Two
<hr size=8 noshade>
Three
<hr size=14 noshade>
Four
<hr size=20 noshade>
</body>
</html>
Color:
You can draw color line in html page, you have to set color attributes to < hr > tag.
<hr color=red> or <hr color="#FF0000">
Width:
You can set width attribute to < hr > tag tag.
<hr width=50> or <hr width=50%>
Align:
You can align the horizondal line to LEFT, RIGHT or CENTER of the HTML Page.
<hr align=left> or <hr align=center>
Horizondal Line with Attributes
HTML Source Code :
<html>
<body>
A simple Line
<hr>
A Line with noshade
<hr noshade>
A Line with noshade , size 4
<hr noshade size=4 >
A Line with noshade , size 10 , color Red
<hr noshade size=10 color=red>
A Line with noshade , size 16 , color Blue , width 100%
<hr noshade size=16 color=blue width=100%>
A Line with noshade , size 22 , color Green , width 50% , align Right
<hr noshade size=22 color=green width=50% align=right>
</body>
</html>