Line Breaks and Draw Lines

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 tag, 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 tag and 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 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>