Home Web Front-end HTML Tutorial Understand the difference between and tags

Understand the difference between and tags

Oct 24, 2017 pm 01:14 PM
the difference Label


The difference between br and p tags , br and p tags are commonly used in p+css development.
Next, we will introduce the difference and usage between
and

tags that are commonly encountered and commonly used in HTML, as well as the use of css Control and set attribute styles for them - extended knowledge: css wraps, css does not wrap.

1. Comprehensive introduction br p - TOP

First of all, the similarity is that both br and p have the attribute and meaning of line breaks
Secondly, the difference< ;br /> is only needed to be used alone, while

and

are used in a pair.
Again, br tag is a small newline to mention the line, p The tag is used for large line breaks (segments) for each line.
Br example, pay special attention to the fact that the web standard of br is
, and if you use
without "/", although the effect is the same, it does not comply with the w3c standard.
This is an example of

tag. It can be seen that using the html p tag changes a big line and has a blank line style.
When the css style is not set for p, the effect of using one

paragraph tag is equivalent to using the effect of two
line break tags.

##When using the p tag, you need to pay attention to the fact that

and

need to be used together. You can see the above illustration to understand it.

Of course, you can make the p tag line wrap like br line wrap without any blank space. You can use css to set margin:0; padding:0; for the corresponding p tag. This can be achieved. Example p{ margin:0; padding:0 ;}, you can realize that

is equal to a
.

The above is a general introduction to the usage of the br "
" and p "

" tags from the PHP Chinese website.

Html Differences between p and br Usage Knowledge Chapter

P and Br both have line breaks. The p tag is a paragraph tag, and br is a forced line break tag.

2. Related html knowledge -

TOP

1, html p

2, html br

3,

and< ;br /> Tag difference -

TOP

P uses a pair of

combination tags, while br is an independent
closing tag .

1. Introduction to P paragraph tagUsually in the article, the paragraphs are clearly distinguished and there is a certain distance between the text in the upper paragraph and the text in the lower paragraph. We can use the p tag for both the upper and lower paragraphs. We use p Paragraph tag, use

before the beginning of a paragraph of text, and add a

tag at the end of the paragraph of text. The paragraph p tag will put a certain distance between the upper and lower paragraphs of text, about twice the line-height distance.

2. Introduction to the Br forced line break tagDifferent from the p paragraph tag, the br tag is used for line break typesetting of paragraphs. After line breaks, the distance between the upper and lower lines of text is based on line-height.
html
Screenshot of forced line break tag demonstration

Usually in web pages under the same initialization, to achieve the same context word spacing, two br line break tags are equivalent to using p paragraph tags.


Html P paragraph and html Br line break comparison case HTML code snippet:

第一行文字 <br /> 
第二行文字<br /><br /> 
第三行文字<br /> 
第四行文字 
<p>第一段文字</p> 
<p>第二段文字</p> 
<p>第三段文字</p>
Copy after login

IV. Summary of Br and p -

TOP

us When text needs small line breaks, we use the br line break tag. If you want to implement paragraphs, you can use the p tag. This clear HTML structure is helpful for search engines and users to read the article. The appropriate paragraph and line break layout should be based on the user's reading habits.

The above is the detailed content of Understand the difference between and tags. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1666
14
PHP Tutorial
1273
29
C# Tutorial
1253
24
How to set password protection for export PDF on PS How to set password protection for export PDF on PS Apr 06, 2025 pm 04:45 PM

Export password-protected PDF in Photoshop: Open the image file. Click "File"&gt; "Export"&gt; "Export as PDF". Set the "Security" option and enter the same password twice. Click "Export" to generate a PDF file.

The difference between H5 and mini-programs and APPs The difference between H5 and mini-programs and APPs Apr 06, 2025 am 10:42 AM

H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.

Difference between centos and ubuntu Difference between centos and ubuntu Apr 14, 2025 pm 09:09 PM

The key differences between CentOS and Ubuntu are: origin (CentOS originates from Red Hat, for enterprises; Ubuntu originates from Debian, for individuals), package management (CentOS uses yum, focusing on stability; Ubuntu uses apt, for high update frequency), support cycle (CentOS provides 10 years of support, Ubuntu provides 5 years of LTS support), community support (CentOS focuses on stability, Ubuntu provides a wide range of tutorials and documents), uses (CentOS is biased towards servers, Ubuntu is suitable for servers and desktops), other differences include installation simplicity (CentOS is thin)

Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder? Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder? Apr 05, 2025 pm 01:03 PM

The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special...

How to use XPath to search from a specified DOM node in JavaScript? How to use XPath to search from a specified DOM node in JavaScript? Apr 04, 2025 pm 11:15 PM

Detailed explanation of XPath search method under DOM nodes In JavaScript, we often need to find specific nodes from the DOM tree based on XPath expressions. If you need to...

What is the difference between syntax for adding columns in different database systems What is the difference between syntax for adding columns in different database systems Apr 09, 2025 pm 02:15 PM

不同数据库系统添加列的语法为:MySQL:ALTER TABLE table_name ADD column_name data_type;PostgreSQL:ALTER TABLE table_name ADD COLUMN column_name data_type;Oracle:ALTER TABLE table_name ADD (column_name data_type);SQL Server:ALTER TABLE table_name ADD column_name data_

The difference between laravel and thinkphp The difference between laravel and thinkphp Apr 18, 2025 pm 01:09 PM

Laravel and ThinkPHP are both popular PHP frameworks and have their own advantages and disadvantages in development. This article will compare the two in depth, highlighting their architecture, features, and performance differences to help developers make informed choices based on their specific project needs.

What are the different ways of promoting H5 and mini programs? What are the different ways of promoting H5 and mini programs? Apr 06, 2025 am 11:03 AM

There are differences in the promotion methods of H5 and mini programs: platform dependence: H5 depends on the browser, and mini programs rely on specific platforms (such as WeChat). User experience: The H5 experience is poor, and the mini program provides a smooth experience similar to native applications. Communication method: H5 is spread through links, and mini programs are shared or searched through the platform. H5 promotion methods: social sharing, email marketing, QR code, SEO, paid advertising. Mini program promotion methods: platform promotion, social sharing, offline promotion, ASO, cooperation with other platforms.

See all articles