Previous
Next

Types of break

<br> or <br/>

In the <p> tag section, we mentioned that any extra lines are removed when the page is displayed. However, there is a way to add line breaks that will not be removed.

<br> or <br/> tag, inserts a single line break. It is usually used within paragraphs when we want to format the line appearance of our content. Moreover, <br> is one of the elements that do not have an end tag.

These elements are called empty tags. In HTML we can use <br> tag by writing either <br> or <br/>. The latest is a more strict way to refer to this element and is mandatory in XHTML. However, in HTML both produce the same result.

<wbr>

The <wbr> tag is a new element of HTML5. It stands for “Word Break Opportunity”.

We use it when we have a long word or phrase and we don’t know how the browser will display it on the page. By adding <wbr> we specify the place where our text is going to split if the page has not enough space.

Similar with <br>, <wbr> does not have an end tag.

Example
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Break elements</title>
  </head>
  <body>
    <h1>Break elements</h1>
       <p>
        My favourite word is supercalifragilisticexpialidocious. It comes 
        from the movie 'Mary Poppins' and is hard to spell correctly.
      </p>
      <p>
         My favourite word is supercalifragilisticexpialidocious.<br>It comes 
         from the movie 'Mary Poppins' and is hard to spell correctly.
       </p>
       <p>
         My favourite word is supercalifragilistic<wbr>expialidocious. It comes 
         from the movie 'Mary Poppins' and is hard to spell correctly.
       </p>
  </body>
</html>

Previous
Next