HTML P tag | HTML paragraph tag | break, font size, line space, indent

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.

HTML P tag | HTML paragraph tag

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 tag example output

HTML paragraph padding | Left, Right, Top and Bottom

Padding is given space between another element or generate space around an element’s content. Padding in HTML paragraph use only by adding CSS code. It makes a <p> tag more stylish and Allegiant. Here are properties of for it:-

  • padding-top
  • padding-left
  • padding-bottom
  • padding-right
  • padding ( Element get padding from all site at one shot)
add HTML paragraph padding HTML P tag

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:

HTML paragraph break

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>&lt;br&gt; 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>&amp; 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; & nbsp; space</P>
        <p style="margin-left:50px">Margin text 50px</p>
        
    </body>
</html>

Output:

HTML paragraph spacing 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. The text-align a property describes the horizontal alignment of text in an element.

AttributeValueDescription
alignright 
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 next line.

<html>
    <body>

        <p style="width:40px">A text width is 40px</p>
        
    </body>
</html>

Output:

HTML paragraph width

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:

How to do HTML paragraph line spacing?

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



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.