HTML
JAVASCRIPT
CSS
PYTHON

HTML Paragraphs

Paragraphs

A paragraph always starts on a new line, and is usually a block of text.HTML paragraphs are block-level elements designed to structure and format textual content on a webpage. A paragraph consists of grouped words and punctuation, helping to organize and display text in a clear and readable way. The <p> tag in HTML is used to define a paragraph element.

Paragraphs are block-level elements that naturally add spacing above and below the text, distinguishing it from nearby content. Using CSS, their appearance can be customized, including font size, color, text alignment, and spacing. In web design, paragraphs are essential for presenting information clearly, improving readability, and enhancing the user experience on a webpage.

To create a paragraph in HTML, use the <p> tag. Place text inside <p> and </p> that you want to display as a paragraph on a webpage.

Key Features of HTML Paragraphs:

  • Automatic Spacing: Browsers add default spacing (margin) above and below paragraphs, separating them visually from other elements
  • Customizable with CSS: You can style paragraphs to adjust their font size, color, line spacing, text alignment, and more.
  • Accessibility and Readability: Proper use of paragraphs ensures content is easy to read and understand, enhancing the user experience.
  • Semantic Meaning: The <p> tag provides semantic value, indicating that the content is a paragraph of text.

Example

  <p>TopFreeCourse first paragraph.</p>  
  <p>TopFreeCourse second paragraph.</p> 
  <p>TopFreeCourse third paragraph.</p>

Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one.

DummyText

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Top Free Course p tag Example</title>
</head>
<body>
    <p>
        This paragraph has multiple lines.
        But HTML reduces them to a single line,
        omitting the carriage return we have used.
    </p>
    <p>
        This paragraph has multiple spaces.
        But HTML reduces them all to a single
        space, omitting the extra spaces and 
          line we have used.
    </p>
</body>
</html>

Output:

This paragraph has multiple lines. But HTML reduces them to a single line, omitting the carriage return we have used.

This paragraph has multiple spaces. But HTML reduces them all to a single space, omitting the extra spaces and line we have used.

Horizontal Rules(<hr>)

Horizontal rules (lines) in HTML are created using the <hr> tag. This tag is a self-closing element and does not require a closing tag. By default, it creates a horizontal line that visually separates content.

Basic Syntax

 <hr>

Output:

Placement and Use Cases

Horizontal rules are typically used to:

  • Separate sections of content.
  • Add a visual break between parts of a webpage.
  • Emphasize a change in topic or a shift in content.
Previous Next