html

HTML Paragraph

Whenever we visit a site we witnessed multiple things like paragraphs, headings, titles, etc. To add such elements on any webpage HTML provide different tags. Paragraph tag is one of them.

The HTML paragraph is an element that contains some text between the starting and closing tags. It is represented by <p> tag. It belongs to block-level elements which means a <p> tag will always start from a new line. The browser will add the margin automatically before and after each <p> tag. The paragraph tag can accept the global attributes like id, style, etc., and event attributes.

Syntax

The syntax of the paragraph element is stated below:

<p> content </p>

Where <p> is used as a starting tag and </p> is used as a closing tag. The closing tag is optional and can be skipped but to avoid the complexities it is recommended that never skip the ending tag of any paired tag.

How <p> Tag Works

This section will present a detailed understanding of how <p> tag works.

Example 1: Consider the following example to understand how <p> element works in HTML:

<html>
    <head>
        <title>HTML Paragraph Tag</title>
    </head>
    <body>
        <p>This is a simple example of p tag</p>
    </body>
</html>

The above code will create a simple tag using the <p> tag as shown in the below snippet:

How to Add style on <p> Tag

Now you must be wondering about its style like how to change the text alignment, font size, background color, etc. of a paragraph. Well! We can style any HTML paragraph with the help of CSS.

Example 2: For this purpose let’s extend the previous example a little bit and implement some style on it:

<html>
    <head>
        <title>HTML Paragraph Tag</title>
    <style>
    p{
        background-color: brown;
        text-align: center;
        font-style: italic;
    }
    </style>
        </head>
    <body>
        <p>This is a simple example of p tag</p>
    </body>
</html>

The above code specifies three properties text-align, background-color, and font-style within the <style> tag. These properties will be applied to the paragraph and it will generate the following output:

How to Add Style to Multiple Paragraphs

If there are multiple paragraphs in the document then the specified styling will be implemented on all the <p> tags.

Example 3: Let’s consider the following example that have three tags as shown in the following code:

<html>
    <head>
    <title>HTML Paragraph Tag</title>
    <style>
        p{
            background-color: brown;
            text-align: center;
            font-style: italic;
        }
    </style>
    </head>
    <body>
        <p>This is first Paragraph</p>
        <p>This is second Paragraph</p>
        <p>This is third Paragraph</p>
    </body>
</html>

The following output will confirm that the properties we set for the paragraph in the style tag are implemented to all the paragraphs:

How to style Each Paragraph Uniquely

Suppose there are multiple paragraphs and you have to style each paragraph differently. Is it possible?

Yes, it is! We can do this in two ways either using inline style attribute or, we can use CSS selectors.

Example 4: Let’s assume the below given code which implement the inline style to the third <p> element:

<html>

    <head>
        <title>HTML Paragraph Tag</title>
    <style>
        p {
        background-color: brown;
        text-align: center;
        font-style: italic;
        }
    </style>
    </head>

    <body>
        <p>This is first Paragraph</p>
        <p>This is second Paragraph</p>
        <p style="background-color: gold; color: red; text-align: left; ">This is third Paragraph</p>
    </body>

</html>

The inline style will be implemented on the third paragraph while the other two paragraphs will be styled according to the internal style as shown below:

Example 5: Let’s consider the following piece of code which will use an id selector to style the second paragraph:

<html>
    <head>
        <title>HTML Paragraph Tag</title>
    <style>
    p{
        background-color: brown;
        text-align: center;
        font-style: italic;
    }
    #one{
        background-color: green;
        text-align: right;
        font-style: italic;
    }
    </style>
    </head>
    <body>
        <p>This is first Paragraph</p>
        <p id="one">This is second Paragraph</p>
        <p> This is third Paragraph</p>
    </body>
</html>

This example describes two different styles: the first and third paragraphs will be styled according to the internal style. While the second paragraph will be styled differently as shown in the following output:

HTML Display

It doesn’t matter how many extra spaces or extra lines are there in the paragraph, HTML will ignore all the extra spaces and extra lines as shown in the below-given snippet:

<html>

    <head>
    <title>HTML Paragraph Tag</title>
    </head>

    <body>
    <p>This is            first
    Paragraph
                with multiple
                extra
                spaces</p>
    </body>

</html>

In the above code there are many extra spaces and lines. However, the output will confirm that the HTML neglects the extra spaces and generates the following output:

Conclusion

As the name itself suggest the paragraph tag in the HTML document is used to create a paragraph. It can take global attributes and event attributes as well. For advanced styling, CSS can be used such as background color, font style, text alignment, etc.

This write-up demonstrated a complete overview of the HTML paragraph where we have learned how to create a paragraph in HTML, what attributes <p> tag can take and how to embed some style patterns to a paragraph using CSS with the help of examples.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.