How do you change the paragraph text in html?

This content has been archived, and is no longer maintained by Indiana University. Information here may no longer be accurate, and links may no longer be available or reliable.

In the most recent World Wide Web Consortium (W3C) recommendations, the preferred method for changing text size is the use of cascading style sheets (CSS). This document describes the use of the HTML <font> tag, which is less flexible than CSS, but compatible with older browsers.

In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.

The default font size is 3, and the largest font size that can be displayed in a browser is 7.

To increase or decrease the size of the font relative to the default size, use <font size="+num"> or <font size="-num"> , where "num" is a number. For example, to make the text two sizes bigger, use:

  <font size="+2">This is bigger text.</font>

To make text one size smaller, use:

  <font size="-1">This is smaller text.</font>

To specify an absolute font size, use <font size="num"> , where "num" is a number from 1 to 7. (When you use absolute font sizes, the resulting display may be more dependent on the browser and hardware of the person viewing the page than when you use relative sizes.) For example, to display the smallest text possible, use:

  <font size="1">This is really tiny text.</font>

For examples of how the different font sizes look, visit W3Schools' HTML <font> Tag Example.

This is document abai in the Knowledge Base.
Last modified on 2021-09-08 10:19:52.

In this article, we will know the HTML Paragraph, & its basic implementation through the examples. The <p> tag in HTML defines a paragraph. These have both opening and closing tags. So anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line as a paragraph even if we don’t use the closing tag i.e, </p>, but this may raise unexpected results. So, it is both a good convention, and we must use the closing tag. 

Syntax:

<p> Content </p>

Example 1: In this example, we are using the <p> tag that is used for paragraphs in HTML.

HTML

<!DOCTYPE html>

<html>

<body>

    <h2>Welcome To GeeksforGeeks</h2>

<p>A computer science portal for geeks.</p>

</body>

</html>

Output:

How do you change the paragraph text in html?

HTML <p> tag

Example 2: This example explains the HTML <p> tag.

HTML

<!DOCTYPE html>

<html>

<body>

<p>A Computer Science portal for geeks.</p>

<p>It contains well written, well thought articles.</p>

</body>

</html>

Output:

How do you change the paragraph text in html?

Multiple <p> tags

Key Points: When we look at the webpage, we see that there are few spaces added before and after a paragraph. HTML does this by default. Let’s look at a few properties of the paragraph tag: 

  • As already mentioned, the<p>tag automatically adds space before and after any paragraph, which is basically margins added by the browser.
  • If a user adds multiple spaces, the browser reduces them to a single space.
  • If a user adds multiple lines, the browser reduces them to a single line.
  • By default, the display of the Paragraph element is set to “block” which you can change using CSS. This means that if you add another paragraph to the webpage the next paragraph will be inserted in the next line on the webpage.

Example: This example explains the HTML <p> tag having multiple lines.

HTML

<!DOCTYPE html>

<html>

<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:

How do you change the paragraph text in html?

<p> tag with multiple lines

<br> tag:There is a way to let the HTML know where the browser needs to change the lines by using the <br> tag. These tags do not have any closing tag. So, just a single opening tag will change the line.

Syntax: 

 <br> 

Example: This example explains the <br> tag inside the <p> tag to add the line-break.

HTML

<!DOCTYPE html>

<html>

<body>

<p>

        This paragraph has multiple

        <br />lines. But HTML reduces them

        <br />to a single line, omitting

        <br />the carriage return we have used.

    </p>

</body>

</html>

Output:

How do you change the paragraph text in html?

Use of <br> tag inside the <p> tag

Align attribute: The <p> tag specifically supports the alignment attribute and allows us to align our paragraphs in left, right, or center alignment. 

Syntax: 

<p align="value">

Example: This example explains the align attribute to align the content in the <p> tag.

HTML

<!DOCTYPE html>

<html>

<body>

    <p align="center">Welcome Geeks</p>

    <p align="left">A Computer Science portal for geeks.</p>

    <p align="right">It contains well written, well thought articles.</p>

</body>

</html>

Output:

How do you change the paragraph text in html?

Use of align attribute in <p> tag

<pre> tagWe have seen how the paragraph tag ignores all the changes of lines and extra spaces within a paragraph, but there is a way to preserve this by the use of the <pre> tag. It also contains an opening and a closing tag. It displays a text within a fixed height and width and preserves the extra lines and spaces we use.

Syntax:

<pre> Content </pre> 

Example: This example explains the use of the <pre> tag in the <p> tag.

HTML

<!DOCTYPE html>

<html>

<body>

  <pre>

    This paragraph has multiple

    lines. But it is displayed

    as it is unlike the paragraph

    tag.

    </pre>

  <pre>

    This     paragraph has multiple

    spaces. But     it is displayed

    as it is    unlike the paragraph

         tag.

    </pre>

</body>

</html>

Output:

How do you change the paragraph text in html?

Use of <pre> tag in the <p> tag

Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Microsoft Edge 12
  • Firefox 1
  • Opera
  • Safari

How do you change text paragraphs in HTML?

The easiest way to modify the content of an HTML element is by using the innerHTML property..
The HTML document above contains a <p> element with id="p1".
We use the HTML DOM to get the element with id="p1".
A JavaScript changes the content ( innerHTML ) of that element to "New text!".

Which tag is used to change paragraph in HTML?

HTML Tag Reference.

How do you edit text in HTML?

HTML Editors.
Step 1: Open Notepad (PC) Windows 8 or later: ... .
Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit. ... .
Step 2: Write Some HTML. Write or copy the following HTML code into Notepad: ... .
Step 3: Save the HTML Page. Save the file on your computer. ... .
Step 4: View the HTML Page in Your Browser..

How do I change the contents of a paragraph?

To change the text in a paragraph using JavaScript, get reference to the paragraph element, and assign new text as string value to the innerHTML property of the paragraph element.