The p and br tags are often used for line breaks in HTML.
However, few people understand the original role of each.
The two are completely different, so it’s important to understand their meaning and use them properly.
In this article, we will introduce the differences between p tags and br tags and how to use them correctly.
Please use it when writing a blog or correcting the wording of the homepage.
What is p tag in html
The p tag is an HTML tag that takes the initials of “paragraph”, which means “paragraph” in English .
As you probably know, paragraphs are blocks of text. And it’s the same in web production.
The characters in the range enclosed by p tags like <p>〜</p> are displayed on the screen as that paragraph.
The p tag is mainly used to make text easier to read, and is very effective for adjusting line spacing.
I will explain how to use the p tag later.
Difference between p tag and line break (br) tag in HTML
The p tag adds paragraphs to the text to make it easier to read, but there is a similar tag called the “br tag”.
The br tag stands for “line break” and is often confused with the p tag.
Here, I will explain the difference between the two in order to use the p tag and the br tag properly.
Difference between paragraph and line break
A surprisingly common mistake is the difference in meaning between paragraphs and line breaks.
The p tag (paragraph) and br tag (line break) are defined as follows.
- p tag (paragraph): A break in sentences with one theme
- br tag (line break): to break one sentence in the middle and make a new line
p tag is recommended over br tag
We don’t recommend overusing br tags when running a website .
Because it makes it harder for crawlers to understand your content.
A crawler is simply a robot that searches for information.
Search engines such as Google use “crawlers” to collect information from around the world day and night.
Therefore, when creating a web page, it is important to describe the structure of HTML in a way that crawlers can easily understand.
If you are conscious of “crawlability” , which means the ease of crawling , it is said that it is better to organize paragraphs with p tags rather than br tags.
By separating with paragraphs rather than line breaks, it is easier for the crawler to evaluate the contents of the content.
Also, since the br tag is a tag that forces a line break, it may appear out of alignment depending on the device.
For these reasons, it is better to use p tags than overuse br tags.
Read Also: What is meta refresh?
How to write p tag in HTML
The p tag is written by surrounding the sentence with <p> and </p> as shown below.
<p>Writing Method Confirmation Test</p>
It is basically displayed as normal text without decoration.
In general, the default style of the p tag in web browsers does not have decorations such as character thickness and lines.
Also, the p tag can specify the margin between paragraphs by margin.
However, don’t use consecutive empty p tags just because you want more space.
<p></p>
<p></p>
<p></p>
<p></p>
<p>Writing Method Confirmation Test</p>
This way you can create a lot of white space on the screen, but search engines will perceive it as a lot of empty paragraphs.
How to apply CSS to p tags in HTML
If you want to visually adjust the space between paragraphs when separating paragraphs with p tags, using CSS is an effective method.
For example, specify the margins in the following format.
p{
margin: 0 0 2em; /*Top, left, right, bottom*/
}
One of the units used in CSS is “em” .
Em is a unit that counts the size with the height of the character as “1em”.
In the above CSS description, it means to specify a 2-character-high margin at the bottom.
How to change margin for each p tag in HTML
In the previous example, all p tags will have a 2em margin at the bottom .
If you want to change the size of the margin for each p tag, use CSS classes.
Create several types of CSS classes for margins in advance, and use them according to the situation.
CSS
.space-A{
margin:0 0 3.5em;
}
.space-B{
margin:0 0 2.4em;
}
.space-C{
margin:0 0 1.4em;
}
.space-D{
margin:0 0 .8em;
}
If you make it as above, it is possible to use 5 types of margins according to the style specified in the p tag.
Add a CSS class to your HTML tag and use it like this:
HTML
<p class=“space-C”>body text here</p>
In the above case, it is possible to specify a margin of “1.4em” at the bottom as set by the space-C class.
Other things you can do with CSS applied to HTML p tags
By applying CSS to the p tag, you can do more than just create margins.
Below are some examples of the main applications of CSS.
p tag line spacing
Using the “line-height” property, 150% or 160% line spacing is common.
You can also specify units such as px, em, and ex.
p{
line-height:150%;
}
p tag color
Use the “color” property.
Black font color designation such as “#333” is common.
p{
color:#333;
}
Centering p-tags
By specifying “center”, which is the value of the “text-align” property, it is possible to center the p tag.
p{
text-align:center;
}
How to handle p tags in WordPress
I think that many people use WordPress to manage blogs and sites, but did you know that WordPress automatically inserts <p> tags into posts?
This is a function that WordPress has by default called “automatic formatting display” .
For example, if you add a paragraph function when creating a post for a blog, it will automatically enclose the text with <p>~</p>, or automatically add <br> when you break a line within a paragraph. I will do it for you.
However, there are some points to be aware of when using the WordPress “automatic formatting” function.
That is, if you modify the CSS yourself, there is a risk that the display will collapse.
If you use CSS to create posts such as blogs with finely specified styles, it may conflict with the source content or CSS styles, resulting in unexpected display collapse.
In order to avoid the above risk, you may want to disable “automatic formatting” in advance.
How to disable “automatic formatting”
There are two ways to disable “automatic formatting”:
Method 1: Stop automatic insertion on both pinned and posted pages
It’s very easy, just copy and paste the code below into your functions.php and you’re done.
add_action(‘init’, function() {
remove_filter(‘the_excerpt’, ‘wpautop’);
remove_filter(‘the_content’, ‘wpautop’);
});
add_filter(‘tiny_mce_before_init’, function($init) {
$init[‘wpautop’] = false;
$init[‘apply_source_formatting’] = ture;
return $init;
});
Now you can stop the automatic insertion of p-tags for both pinned and post pages.
Method 2: Stop automatic insertion of p tags for specific post ties
For example, if you want to stop the automatic insertion of p tags only for static pages, copy and paste the following code into functions.php as before.
add_filter(‘the_content’, ‘wpautop_filter’, 9);
function wpautop_filter($content) {
global $post;
$remove_filter = false;
$arr_types = array(‘page’);
$post_type = get_post_type( $post->ID );
if (in_array($post_type, $arr_types)) $remove_filter = true;
if ( $remove_filter ) {
remove_filter(‘the_content’, ‘wpautop’);
remove_filter(‘the_excerpt’, ‘wpautop’);
}
return $content;
}
Now you can stop auto-insertion of p-tags for “static pages only” .
summary
The points introduced in this article are summarized below.
- The p tag is an HTML tag that adds paragraphs to text to make it easier to read.
- Use the p tag to group paragraphs, not to break lines
- The br tag is an HTML tag for “line breaks”
- Using br tags reduces the SEO effect because it is difficult for crawlers to detect
- Use CSS to specify margins between paragraphs
- Stop automatic formatting when using CSS in WordPress
We have explained what p-tags are, their uses and precautions.
I think that it is difficult for beginners of web development to understand everything at once, but I hope that you will refer to this article and use it for your daily web development.