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

HTML P Tag is textual element. It’s also called as HTML Paragraph Tag. It’s a block level element and always start with a new line. 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 new learner HTML or web designing.

HTML P tag | HTML paragraph tag

Syntax

HTML <p> Tag element start with <P> and End with </P> tag.

Example | HTML Paragraph Tag

HTML paragraph element example is very easy.

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 <br> tag where you want to break a line. See below code of it.

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.

  • <br> tag – use for next line.
  • Margins – two types (Negative values margins opposite side as per cartesian sign rule)
    • margin-left:some px or percent
    • margin-top:some px or percent.
  • & nbsp; – For space in HTML, it takes a very less amount of space.

Note: no gap between “& and n“. See below example.

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 Paragraph align | Make more readable

To make alignment in text use text-align property in CSS. The text-align property describe 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 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.

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.

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 in 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.