HTML P Tag is textual element. It’s also called an HTML Paragraph Tag. It’s a block-level element and always starts with a new line. In this tutorial, you will learn about HTML <p> tag basic and its attribute.
The closing </p> tag is optional, a tag is omitted, it is considered that the end of the paragraph matches with the start of the next block-level element. But it’s a good practice to use closing Html </p> tag. It ensures your HTML document (code) validates
You get the very first encounter with HTML p Tag if you are a new learner of HTML or web designing.
Syntax
HTML <p> Tag element start with <P> and End with </P> tag.
<p> Content </p>Example | HTML Paragraph Tag
HTML paragraph element example is very easy.
<html>
<body>
<p>This is HTML P tag</p>
</body>
</html>Output:
HTML paragraph padding | Left, Right, Top and Bottom
Padding is given space between another element or
- padding-top
- padding-left
- padding-bottom
- padding-right
- padding ( Element get padding from all site at one shot)
HTML paragraph break | Multiline
Some places are needed to break a text (paragraph) into the next line. You can use the <br> tag where you want to break a line. See below code of it.
<html>
<body>
<p>This is HTML P tag <br> Its break to next line</p>
</body>
</html>
Output:
How to do HTML paragraph spacing?
Do give space between a paragraph or in the text you can use padding, margin, <br> tag, & nbsp; etc.
<ul><li><strong><br> tag</strong> - use for next line.</li><li><strong>Margins</strong> - two types (Negative values margins opposite side as per cartesian sign rule)<ul><li>margin-left:some px or percent</li><li>margin-top:some px or percent.</li></ul></li><li> <code>& nbsp; </code> - For space in HTML, it takes a very less amount of space.</li></ul>Note: no gap between “& and n“. See below example.
<html>
<body>
<p>This is HTML P tag <br> Its break to next line</p>
<p style="padding-left:60px">Padding text 60px</p>
<p> This is 2x & nbsp; space</P>
<p style="margin-left:50px">Margin text 50px</p>
</body>
</html>
Output:
HTML paragraph font size
Changing the font size of text is done through using CSS style. Or use a HTML Font Size | px, em, small, bold
Let’s see the example of it.
<html>
<body>
<!--using font tag -->
<p><font size="6">A text with size</font></p>
<p>No font size changed<p>
<!-- inline CSS -->
<p style="font-size: 24px;">A text with size 24px</font></p>
</body>
</html>HTML Paragraph align | Make more readable
To make alignment in text use the text-align property in CSS. text-align
| Attribute | Value | Description |
|---|---|---|
| align | right left justify | Defines the text alignment. |
text-align: left|right|center|justify|initial|inherit;
See below code how to use it.
<html>
<body>
<p style="text-align: right">A text Right aligx</p>
</body>
</html>
HTML paragraph color | Style the text
Font color of HTML <p> tag can change by 2 ways first using a <font> tag, other is use a CSS.
<p><font color=”color_name|hex_number|rgb_number“></p> //font tag
<p style=”property:value;“><p> //using CSS
Recommended tutorial – HTML Font Color | Text Color Codes
HTML paragraph width
Forgive width to <p> tag you need to use CSS style width property. The width property sets the width of a paragraph element.
width: auto|value|initial|inherit;
Example: setting width 40px in HTML P tag, if the text is more then it will break to the
<html>
<body>
<p style="width:40px">A text width is 40px</p>
</body>
</html>
Output:
How to do HTML paragraph line spacing?
Use The line-height property specifies the height of a line in <p> tag.
<html>
<body>
<p style="line-height:9">A text Line 1</p>
<p style="line-height:9">A text Line 2</p>
</body>
</html>Output:
Question: HTML paragraph indent?
Answer: This question is for you, please do answer in a comment. We will pick up the best answer and add to this tutorial.
Note: Where we used inline CSS, you can also use Internal/External CSS for every example.
Do comment if you have any doubt, suggestions, and example for HTML P tag tutorial.
Note: The All HTML Paragraph (<p>) Tag Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version
Thank you for this…this helped me fix an issue I was having coding an element on my website.