Line breaks and spaces

Force line breaks in HTML

A line break can be forces with the <br/> tag. "BR" is the abbreveation for brake row here.

To add our forced line breaks we need to change the content of our HTML document like this:


   <p>
       This is my 4. th website and <br />
       i've learned how to create paragraphs and it's <br />
       fun to create a website. <br />
    </p>

Now we will see a line break at the parts where we've inserted the <br/> tag. We now know how to force the browser to break a line, but how to insert an empty line?

Empty lines with HTML

To have an empty line after a content block, you can simply wrap each block into <p></p> tags.

Your browser will automatically add some space after the paragraph:

<html>
  <!-- beginning of html document -->
  <head>
   <!-- head of html document -->
   <title>
    Hello Title
   </title>
  </head>
  <body>
   <!-- content of the html document -->
   <!-- heading -->
   <h1>My second page</h1>
   <!-- horizontal line -->
   <hr />
 
   <p>
       This is my 5. th website and <br/>
       i've learned how to create paragraphs and it's <br/>
       fun to create a website. <br />
    </p>
    <p>
       Now i have learned a lot of new stuff and create a nice website.
    </p>
  </body>
 </html> 


 

 

In the browser the page looks like this:

On the previous pages we talked about structural elements on a website. Browsing the web wouldn't be as fun as nowadays without the styling and visual effects on the websites. Cascading Style Sheets - CSS help us to make websites visually nice.


The next chapter will give and introduction into CSS and how it can be used on your website to make it nicer ;)

 

Navigation