Heading, Paragraph, and Pre Tags in HTML

The Heading and Paragraph Tags are the most basic tags used to write an HTML document. In this article, we will see how to use them.

The heading tags

The heading tags are used to display the information in a larger font size. It is used to display headings in order to gain user attention.The heading tags are <h1> <h2>,<h3>.... till <h6>.The <h1> tag has the largest font size,<h2> tag has the second largest font size, and so on.<h6> tag has the smallest font size. the heading tags must have a closing tag. The below code shows how these tags are used. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rapid Coders</title>
    </head>
    <body>
    <h1>This is an h1 tag.</h1>
    <h2>This is an h2 tag.</h2>
    <h3>This is an h3 tag.</h3>
    <h4>This is an h4 tag.</h4>
    <h5>This is an h5 tag.</h5>
    <h6>This is an h6 tag.</h6>
    </body>
    </html>

The paragraph tag

The paragraph tag is used to display large information in a paragraph format. An HTML document can have multiple paragraphs and other tags but only one body tag. Hence, we can group information on the website using paragraph tags. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rapid Coders</title>
    </head>
    <body>
    <h2>Rapid Coders</h2>
    <p>
    Hello everyone! My name is Elite Akshay and I'm passionate about teaching coding and engineering subjects to help people build a strong foundation in these fields.
    My goal is to share the wealth of knowledge with others and help people develop skills by which they can earn money. Here I'll be breaking down complex concepts
    into easy-to-understand pieces to help you learn and practice what you've learned.
    </p>
    </body>
    </html>
One thing to note here is that HTML ignores line breaks and multiple white spaces. For example - 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rapid Coders</title>
    </head>
    <body>
    <p>
    *
    * *
    * * *
    </p>
    </body>
    </html>
The webpage looks like this -

The pre tag

To solve the above problem, we can use the pre tag. The pre tag outputs the content inside it as it is written. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rapid Coders</title>
    </head>
    <body>
    <pre>
    *
    * *
    * * *
    </pre>
    </body>
    </html>
Now, we will get the expected output.