Skip to HeaderSkip to PostSkip to Footer

HTML Paragraphs

Table of Content

    HTML Paragraphs - The following is a summary of the HTML paragraphs tag/element (<p>).

    What are HTML Paragraphs?

    HTML Paragraphs are HTML tags or elements that function to make the content in those tags into paragraphs. This tag is usually used for content in the form of text / writing.

    The HTML Paragraph code is <p>...text content...</p>.

    Text using the HTML Paragraph tag starts on a new line and automatically has top and bottom margins without the need for CSS Styling adjustments.

    Content inside the HTML Paragraph tag will also make extra spaces and newlines disappear automatically.

    Tips: Do not include container elements such as blockquotes (<blockquote>), HTML Headings, or anything else inside the paragraph element <p> so as not to break the sematics of the Paragraph elements.

    Default Stylesheet

    HTML Element Default Stylesheet
    <p></p>
    • Display: block
    • Margin-top: 1em
    • Margin-right: 0
    • Margin-left: 0
    • Margin-bottom: 1em

    Attributes and Functions

    Attributes Functions Value Examples
    class Contains class selector for CSS Styling. class-selector <p class='paragraph1'>Contents</p>
    id Contains the unique code id selector for CSS Styling and targeting elements. class-selector <p id='paragraph1'>Contents</p>
    style Contains CSS styling code for images. CSS Value <p style='text-align:center'>Contents</p>

    Application Example

    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>

    Result

    Paraghraph 1

    Paraghraph 2

    Paraghraph 3

    Note: The results that appear in the results section are already affected by CSS Styling, so they don't appear as default.

    Notes

    • Even though it is in the form of a paragraph, the indensation of the text still has to be set manually using the CSS Styling method using the text-indent property.
    • Another alternative to the HTML Paragraph element is HTML Preformatted Text (<pre>).

    Closing Statements

    That's a little summary of HTML Paragraph that I can share. If something is missing, unclear, or wrong, please let me know or just ask through the comments column below. Hopefully useful and see you in my other writings.

    Paragraph element is very useful to make text appear neater and doesn't contain a lot of DOM which makes loading difficult.Ninura

    Comments