Horizontal Lines and Paragraphs

Horizontal lines with html

With horizontal lines, you can seperate parts on your page visual and semantically. It's good to use it rarely and when it make sematically sence.

How to add a horizontal line? Usr the "hr" tag for it:


<hr />

Adding a hoirzontal line

As you might notice, the hr (horizontal rule) tag is an example for a self-closing tag. We modify our HTML document in the following way to see our horizontal line:

<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 />
  </body>
 </html> 


Opening the page in the browser will show us the following website:

Structuring HTML Pages with Paragraphs

After the headline we want to add text. We can format this text as in a "text processing" software and split it into paragraphs.

Because computer guys are lazy, the use the abbreveation "p" for the HTML tag.

So let's add the first paragraph to our HTML document:


<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 4. th website and
       i've learned how to create paragraphs and it's
       fun to create a website.
    </p>
  </body>
 </html> 

When we open the page in the browser it looks like this:

Maybe your wonder, why your browser shows all text in the paragraph as one single line instead of keeping the line break?


This happens because your browser takes care of the linebreak to format the content based on the users devide. Sometimes you want to force the browser to break the line, or you want to add empty lines to the content.

 

In the next chapter we will add linebreaks and empty lines to our HTML document.

 

 

Navigation