Mastering HTML Line Breaks

Introduction

In this lab, you will learn how to use the HTML <br> tag to create line breaks on a webpage.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/basic_elems -.-> lab-70715{{"`HTML Line Break`"}} html/head_elems -.-> lab-70715{{"`HTML Line Break`"}} html/text_head -.-> lab-70715{{"`HTML Line Break`"}} html/para_br -.-> lab-70715{{"`HTML Line Break`"}} end

Create an HTML file

Create a new file named index.html and add basic HTML structure.

<!doctype html>
<html>
  <head>
    <title>Line Breaks with HTML</title>
  </head>
  <body></body>
</html>

Add text to the webpage

Add some text to the body of your HTML document.

<body>
  <h1>Welcome to my webpage!</h1>
  <p>This is some text on my webpage. I want to create a line break here:</p>
  <p>But how do I do it?</p>
</body>

Use the `<br>` tag for line breaks

To add a line break between the two paragraphs of text, add the <br> tag after the first paragraph tag.

<body>
  <h1>Welcome to my webpage!</h1>
  <p>This is some text on my webpage. I want to create a line break here:</p>
  <br />
  <p>But how do I do it?</p>
</body>

Customize line break spacing with CSS margin

To customize the amount of space that a line break creates, you can use CSS margin. Add the following CSS code to your HTML file to create 30px of space above and below each line break.

<head>
  <title>Line Breaks with HTML</title>
  <style>
    br {
      margin-top: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

Save your index.html file and open it in a web browser to see the line break that you created.

Summary

The HTML <br> tag is a simple way to create line breaks on your webpage. Use it to add space between paragraphs of text, or anywhere else that you need to break a line. Customizing the amount of space created by a line break is easy with CSS margin.

HTML Line Break