HTML Paragraphs

HTML paragraphs are a fundamental building block for creating structured and readable content on a webpage. In this chapter we will learn everything you need to know about the  element, its uses, best practices, and how to enhance it with styling and functionality.

What is an HTML Paragraph?

An HTML paragraph is a block of text enclosed within the  tag. It is used to organize content into meaningful sections, making it easier for users to read and understand.

HTML-paragraphs-from-html-coding-to-webpage-result

Example:

<p>This is a paragraph in HTML.</p>

When rendered in a browser, each paragraph starts on a new line and adds some space above and below it by default.

Features of `` Element in HTML

Defines Paragraphs: The  element is used to create paragraphs in HTML, grouping related text into logical blocks.

Block-Level Element:  is a block-level element, meaning it starts on a new line and takes up the full width available.

Default Spacing: Browsers automatically add margin above and below each  element, improving readability.

Supports Inline Elements: You can include inline elements like , , <a>, or  inside a paragraph for styling or linking parts of the text. For example:

<p>HTML is easy <strong>learn and understand</strong>.</p>

Here the "learn and understand" words will be bold formatted.

Whitespace Management: Extra spaces or line breaks inside the  tag are ignored by browsers. For example:

<p>
    This       is        a
    paragraph.
</p>

The browser renders this as: "This is a paragraph."

Supports Attributes: The  tag supports global attributes like id, class, and style, enabling custom styling and scripting.

Notes:

HTML ignores extra spaces and line breaks within the paragraph.

Always properly close  element. Browsers may try to auto-correct unclosed tags, but this can lead to unpredictable results.

Avoid using empty  tags just to create space. Use CSS for layout adjustments.

Different Uses of the `` Element

Here are some practical and creative ways to use the  element on your webpage.

Create a Real Story Using Paragraph

 allows you to create a block of text on your webpage. So if you want to create a story, you have to use (paragraph)  element.

Example:

<body>
   <h1>Newton and the Apple</h1>
   
   <p>One day, Isaac Newton was sitting under an apple tree when an apple fell to the ground. Watching this simple event, he began to wonder why the apple fell straight down instead of sideways or upward.</p>
   <p>This curiosity led him to discover the law of gravity, changing the way we understand the universe forever.</p>
</body>

Try It Yourself

Styling Paragraph with CSS

You can easily customize  element using CSS. In this example we used internal CSS.

Example:

<style>
   p {
      font-size: 20px;
      color: green;
      line-height: 1.5;
      text-align: center;
      text-shadow: 8px 8px 8px #888;;  
   }
</style>
   
<p>Custom style applied on this paragraph.</p>

Common CSS Properties for Paragraphs:

font-size: Adjust text size.

color: Change text color.

line-height: Control spacing between lines.

text-align: Align text (left, right, center, or justify).

text-shadow: Adds a shadow effect to text.

Try It Yourself

Adding Links Inside a Paragraph

Links are special feature of HTML. Using links you can easily visit one page to another page or one website to another website.

Example:

<p>Visit <a href="https://w3studies.com">W3Studies</a> to learn web development.</p>

Try It Yourself

Inline Elements Inside Paragraph

<p>This text includes <strong>bold</strong>, <em>italic</em>, and <u>underlined</u> words.</p>

Try It Yourself

Using Paragraphs with Classes

In HTML, a class is an attribute that assigns one or more names (class names) to an element.

Syntax:

Hello world!

Example:

<style>
   .fruit {
      border: 1px solid #eee;
      padding: 10px;
      border-radius: 10px;;
   }
   .mango {
      color: green;
      padding: 30px;
      text-align: center;
   }
</style>

<p class="fruit">Everyone love fruits.</p> 
<p class="fruit mango">Mango is my first choice!</p>

The border property in CSS is used to define the visible boundary around an HTML element.

The padding property adds space between the content of an element and its border.

The border-radius property used to round the corners of an element's border.

Try It Yourself

Using Paragraphs with Id's

An ID is a unique identifier for a specific element, used when you need to target one element only.

Syntax:

This is a paragraph.

Example:

<style>
   #banana {
      color: yellow;
      background: green;
      padding: 10px;
   }
</style>

<p id="banana">Banana is a healthy food.</p>

The background property specifies the background color of an element.

Note:

border, padding, border-radius, background these are CSS property. you will learn more about these in our CSS tutorial

Try It Yourself

← HTML Headings

HTML Comments →

HTML Paragraphs

What is an HTML Paragraph?

Example:

Features of `<p>` Element in HTML

Notes:

Different Uses of the `<p>` Element

Create a Real Story Using Paragraph

Example:

Try It Yourself

Styling Paragraph with CSS

Example:

Common CSS Properties for Paragraphs:

Try It Yourself

Adding Links Inside a Paragraph

Example:

Try It Yourself

Inline Elements Inside Paragraph

Try It Yourself

Using Paragraphs with Classes

Syntax:

Example:

Try It Yourself

Using Paragraphs with Id's

Syntax:

Example:

Note:

Try It Yourself

Post a Comment

Catch the Falling Objects

w3studies | Free web Tutorials

Contact form

HTML Paragraphs

What is an HTML Paragraph?

Example:

Features of <p> Element in HTML

Notes:

Different Uses of the <p> Element

Create a Real Story Using Paragraph

Example:

Try It Yourself

Styling Paragraph with CSS

Example:

Common CSS Properties for Paragraphs:

Try It Yourself

Adding Links Inside a Paragraph

Example:

Try It Yourself

Inline Elements Inside Paragraph

Try It Yourself

Using Paragraphs with Classes

Syntax:

Example:

Try It Yourself

Using Paragraphs with Id's

Syntax:

Example:

Note:

Try It Yourself

You may like these posts

Post a Comment

Contact form

Features of `<p>` Element in HTML

Different Uses of the `<p>` Element