HTML Paragraph

byLearn Code and Programing -
0
HTML Paragraph

Paragraph Tag

<p> tag in HTML stand for paragraph. It serves the purpose of establishing a separate block of text as a paragraph; It is the simplest and frequently used element for adding content in a webpage.

  1. Organizes text into sections that can be read easily.
  2. Automatically adds space (margin) before and after the text.
  3. Help in Search Engine Optimization (SEO) by organizing the content appropriately.

EXAMPLE

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

Key Features of <p> Tag:

  1. Block-level Element : It always takes up the entire width and begins on a new line.
  2. Can Contain Inline Elements : You can also used the inline tags like <a> , <em> , <strong> , <span> , inside a <p>
  3. Use closing </p> tag : Your paragraph tag should always be closed. It can be automatically closed by some browsers, but this feature is unreliable.
  4. One idea per paragraph : With the help of this you can read content easily and understand.
  5. Don’t nest block elements inside <p> : The block element like <div> , <ul> , <table> , etc , should not go inside a <p> tag,
Don't Do This!
<p>This is wrong <div>Nested Div</div> </p>
Corrected Version
<p>This is correct version</p> <div>Nested Version</div>

<!DOCTYPE html> <html> <body> <h1>Paragraph with Inline Tags</h1> <p>This is my first Paragraph</p> <p>This is <strong>important</strong> and <em>emphasized</em> information.</p> </body> </html>

Paragraph vs Line Break <br>

Paragraph <p>

Uses spacing to begin a new block.

Line Break <br>

The <br> is used to move to the next line inside the same paragraph .

<!DOCTYPE html> <html> <body> <p>Hello,<br>Welcome to my HTML tutorial.</p> </body> </html>

Styling Paragraphs with CSS

We can also apply CSS on the paragraph , with the help of CSS we can change the font, color, etc of paragraph . lets apply inline CSS on the paragraph.

<!DOCTYPE html> <html> <body> <p style="font-family: Arial; font-size: 20px; color: green;"> This is a paragraph with green text using Arial font. </p> <p style="font-weight: bold; text-align: center; font-size: 22px;"> This paragraph is bold and center-aligned. </p> </body> </html>

Applying CSS on 'p' Element

<!DOCTYPE html> <html> <head> <style> p { font-size: 22px; color: #008000; } </style> </head> <body> <p>This is the my first paragraph.</p> <p>This is the my second paragraph.</p> </body> </html>

Link with Paragraph

In HTML , you can insert link within the paragraph using <a> tags to make specific words or phrases clickable .

<!DOCTYPE html> <html> <body> <p>This is a paragraph with a <a href="https://learnfastcode.com"> link to a website</a> inside it.</p> </body> </html>

Images Within Paragraphs

In HTML , you can insert image within the paragraph using <img> tags .

<!DOCTYPE html> <html> <body> <img src="https://via.placeholder.com/150" alt="Placeholder Image" style="border: 3px solid black; margin-top: 20px; border-radius: 10px;" /> </body> </html>

Superscript and Subscript Within Paragraphs

In HTML , we using superscript and subscript text within a paragraph using <sup> . This is also useful for mathematical notations, chemical formulas, footnotes and more .

<!DOCTYPE html> <html> <head> <title>Superscript and Subscript Example</title> </head> <body> <p>Water's chemical formula is H<sub>2</sub>O.</p> <p>Area of a square = a<sup>2</sup></p> </body> </html>

Citations Within Paragraphs in HTML

The <cite> tag is used to define the title for a creative work, like book, document, website ,movie or other source . Typically , browsers style it in italic by default. They increase the credibility and meaning of content. HTML provide specific tags like <cite> and <blockquote> to mark citations inside the paragraph.

<!DOCTYPE html> <html> <head> <title>Citation Example</title> </head> <body> <p> The cite tag is used to define the title for a <cite>creative work, like book, document</cite> </p> </body> </html>

<blockquote> Tag

If you can quote long sentence then you use the blockquote

<!DOCTYPE html> <html> <head> <title>Blockquote Example</title> </head> <body> <blockquote> "Welcome to HTML tutorial, and this is the best platform for HTML" . </blockquote> </body> </html>

Horizontal Line in Paragraph

In HTML, the <hr> is stand for horizontal line . It is frequently used to visually divide sections or content.The <hr> tag is empty tage and does not need a closing tag.

<!DOCTYPE html> <html> <head> <title>Horizontal Line in Paragraph</title> </head> <body> <p>This is the first paragraph of the article.</p> <hr> </body> </html>

Abbreviations Within Paragraphs

The <abbr> tag helps us to define abbreviations or acronyms.

<!DOCTYPE html> <html> <head> <title>Abbreviations in HTML</title> </head> <body> <p> The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. </p> </body> </html>

<span> tag

The <span> tag is inline tag that gives us text fromat. Whenever you use this tag , your text remain in the same line instead of going to the second line . The formatting remains between this tag just applies to it.

Syntax
<span>This is correct version</span>

<!DOCTYPE html> <html> <head> <title>Span in HTML</title> </head> <body> <p>This is a <span style="color:blue;">blue word</span> inside a paragraph.</p> </body> </html>
Tags:
Previous Post Next Post