-
HTML <p> element is used to define a paragraph in a webpage.
Paragraphs
- Paragraphs are usually represented in visual media as a block of text.
- Paragraphs will start in a new line, and all browsers automatically add some white space before and after a paragraph.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Paragraph</title>
</head>
<body>
<h1>HTML Paragraph</h1>
<p>This is a text paragraph</p>
<p>Write your own text paragraph in between the "p" element</p>
</body>
</html>
<html lang="en">
<head>
<title>HTML Paragraph</title>
</head>
<body>
<h1>HTML Paragraph</h1>
<p>This is a text paragraph</p>
<p>Write your own text paragraph in between the "p" element</p>
</body>
</html>
Note: Browser automatically add some white space before and after paragraph.
HTML Display
- HTML <p> element changes the display by adding extra space or line in your HTML code.
- Browser automatically remove extra spaces and lines when the page is displayed.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Paragraph with extra spaces</title>
</head>
<body>
<h1>HTML remove extra spaces and line in paragraph</h1>
<p>The paragraph,
contains a lot of lines,
in the source code,
the browser ignores it.</p>
<p>The paragraph,
contains a lot of spaces,
in the source code,
the browser ignores it.</p>
</body>
</html>
<html lang="en">
<head>
<title>HTML Paragraph with extra spaces</title>
</head>
<body>
<h1>HTML remove extra spaces and line in paragraph</h1>
<p>The paragraph,
contains a lot of lines,
in the source code,
the browser ignores it.</p>
<p>The paragraph,
contains a lot of spaces,
in the source code,
the browser ignores it.</p>
</body>
</html>
HTML <pre> Element
- HTML <pre> element defines a preformatted text.
- Text inside a <pre> element is displayed in a fixed-width and default font, it freeze both spaces and line breaks.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML <pre> Element</title>
</head>
<body>
<h1 style="font-size:70px;">HTML <pre> element freeze both space and line break<h1>
<pre>
HTML stand for
Hyper
Text
Markup
Language.
</pre>
</body>
</html>
<html lang="en">
<head>
<title>HTML <pre> Element</title>
</head>
<body>
<h1 style="font-size:70px;">HTML <pre> element freeze both space and line break<h1>
<pre>
HTML stand for
Hyper
Text
Markup
Language.
</pre>
</body>
</html>
Next Topic: HTML Styles