One of the tags often used in
HTML
is the “br tag”. It is used to insert a line break in a web page, but in addition to the br tag, the “p tag” and “pre tag” may also be used to insert a line break.
All of these tags can insert line breaks, but each has its own correct usage. If not used properly, it may have a negative effect on the display results of the web page.
In this article, we will explain the meaning of the br tag, the difference from the p tag and pre tag, and how to write it. If you don’t know the difference between each tag, please refer to this article and understand the correct usage of br tag, p tag, and pre tag.
What is the HTML br tag?
The HTML br tag is a tag used to insert a line break in the displayed results of a web page. “br” means “break”.
In addition to the br tag, you can also use the p tag and pre tag to insert a line break, but each has a different meaning and usage.
People tend to think that “it doesn’t matter which tag you use as long as it allows line breaks,” but it makes a difference in the readability of the web page, the ease of editing the HTML, and the evaluation from Google. Therefore, it is important to understand the difference between the br tag, p tag, and pre tag and use them correctly.
Difference between br tag and p tag
There are the following differences between the br tag and p tag.
| br tag | p tag | |
| the purpose | used to create a single line break | used to define paragraphs |
| Usage scene | When you want to create line breaks within a sentence, or within a series of text, such as a multi-line address or contact information. | If you want to create a single blank line to separate paragraphs and create block elements |
| Description method | Described with a single tag without an end tag | Described with start and end tags |
The “p” in the p tag stands for “paragraph” and is a tag for defining a “paragraph.” If you use the p tag, a line break will occur before and after the sentence between the start and end tags. This visually separates the paragraphs and makes them easier to read.
You can specify
CSS
content and control
JavaScript
using the id attribute for the range between the start and end tags.
Difference between br tag and pre tag
The br tag and pre tag have the following differences.
| br tag | pre tag | |
| the purpose | used to create a single line break | used to pre-format text |
| Usage scene | When you want to create line breaks within a sentence, or within a series of text, such as a multi-line address or contact information. | When editing code, if you want to preserve code line breaks, spaces, etc. |
| Description method | Described with a single tag without an end tag | Described with start and end tags |
“pre” stands for “preformatted text” and is used to display formatted text within HTML. Even if you insert a line break in the string in the HTML editor, the line break will be ignored in the web display results.
Of course, you can use the br tag to create a line break, but if you use the pre tag, you don’t have to insert a br tag at the line break, so you can write code that is easier to read.
HTML line break method
Now, I will explain how to write the br tag and p tag, which are often used to insert line breaks.
How to write the br tag
The br tag is written as <br> at the place where you want a line break in the text. The specific way to write it is as follows.
Today’s weather is cloudy and then sunny. <br>The expected maximum temperature is 25℃. <br>The laundry will dry well.
The execution results are as follows.
Today’s weather is cloudy and then sunny.
The expected maximum temperature is 25℃.
Your laundry will dry well.
A line break will occur where the br tag is inserted.
How to write p tag
Write the p tag for the sentence in which you want to create a paragraph. Since the start tag and end tag are a single set, place the p tags before and after the sentence where you want to create a paragraph. The specific way to write it is as follows.
<p>Yesterday’s dinner was delicious pizza. The combination of fresh tomatoes and mozzarella cheese was exquisite. </p>
<p>I woke up early this morning and went jogging. I was able to feel refreshed while feeling the fresh morning air. </p>
<p>I’m planning to go to the movie theater with my friend on the weekend. I’m really looking forward to the latest action movie being released. </p>
The execution results are as follows.
Last night’s dinner was delicious pizza. The combination of fresh tomatoes and mozzarella cheese was exquisite.
This morning I woke up early and went jogging. I was able to feel refreshed while feeling the fresh morning air.
I’m planning to go to the movie theater with a friend on the weekend. I’m really looking forward to the latest action movie being released.
In the example above, each paragraph deals with a different topic. If you use p tags to sandwich sentences between paragraphs, each paragraph will be automatically separated and displayed with appropriate spaces added above and below when viewed on a web page.
What should I be careful about when using line breaks in HTML?
The br tag, p tag, and pre tag are all HTML tags that can reflect line breaks, but if you don’t use each tag appropriately, there will be a difference in the readability of the web page and the evaluation from Google. In particular, it is important to be careful not to use it in the following ways.
I will explain why you should not use each of these in turn.
Using the br tag in a paragraph
Avoid using br tags in paragraphs. This is because
search engines
cannot be told the relevant part as a paragraph.
When a search engine crawls a sentence, it recognizes it as a paragraph because of the p tag in the sentence. This makes it easier to understand what kind of sentence structure the page has, making it easier to evaluate it as an easy-to-understand page.
However, since the br tag simply creates a new line in the string, it is not considered a paragraph, but rather a series of sentences. To improve your ranking from search engines, avoid using br tags when specifying paragraphs.
Use br tag for design adjustment
Some people use the br tag to adjust the design because they can easily insert a line break, but this should be avoided. This is because it becomes difficult to achieve
responsive
design (optimal display for each device).
For example, even if you create an easy-to-read layout by inserting line breaks with br tags with the intention of displaying it on a computer screen, it often does not look legible when viewed on a smartphone screen.
You can easily adjust the spacing between paragraphs and elements using CSS, so don’t try to adjust the design using the br tag.
Inserting br tags consecutively
Some people add consecutive br tags to make it easier to read by adding appropriate spaces before and after sentences, but this should also be avoided. This is because, similar to the reason why it is better not to use the br tag in the design adjustment mentioned above, it will not be compatible with responsive design.
Again, if you change the screen display size or display it on a smartphone screen, unnatural line breaks are likely to appear. If you want to add appropriate white space, use the p tag and adjust it using the CSS margin and padding properties.
Using br tag with slash
The br tag can also be written as <br/> with a slash at the end, but this is not recommended.
This is because the br tag with a slash is primarily used as a self-closing tag in the XHTML grammar, and may not be interpreted correctly in some older browsers or in some environments.
If self-closing tags with slashes are not recognized correctly, unintended results may occur when the web page is displayed.
Therefore, to maintain browser compatibility, it is recommended to use the <br> tag without the slash. The br tag with a slash is used as a self-closing tag in the XHTML grammar.
Using the p tag in sentences where the content does not change
Avoid using p tags within sentences on the same topic. This is because the p tag is a tag that means a paragraph, so search engines will treat everything between the p tags as a paragraph. Therefore, it may not be properly indexed by search engine crawlers.
CSS is recommended for adjusting line spacing (design)
If you want to adjust the design of a web page, including adjusting line spacing, we recommend using CSS. This is because it allows for flexible design adjustments.
For example, if you want to adjust the height of a line of text, you can use the line-height property in the p tag’s CSS to adjust the line height using the following pattern.
Using CSS, you can make detailed adjustments that are difficult to make using the br tag. Also, by using CSS, you can centrally manage line spacing styles.
Setting line spacing for a specific element or class ensures a consistent design everywhere it is applied. Additionally, CSS style rules can be reused across multiple pages and elements, which is great for maintenance.
Frequently appearing tags other than br tag
We have introduced the br tag and p tag as tags that appear frequently when editing HTML. For your reference, we will also introduce commonly used tags other than the br tag.
These are some commonly used HTML tags, but there are actually many more. It is important to be able to make the correct choice regarding the use of each tag based on the meaning and structure of the content.
summary
In this article, we explained the meaning of the br tag, the difference from the p tag and pre tag, and how to write it.
The br tag is a useful tag that can be used when you want to insert a line break in a sentence, but if not used properly, it can have a negative impact on display results and search engine ratings.
When you want to insert a line break in a sentence where the topic changes, using the p tag will make it easier for search engines to evaluate your text.
In addition, p tags are extremely useful when combined with CSS, allowing for flexible designs and batch control of designs.
If you use br tags a lot to create line breaks and arrange layouts, be sure to learn how to use p tags and CSS to create web pages with easy-to-read layouts.