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.

line-break

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-line

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-line-size

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-line-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>