Loop Control Statements in C Introduction to HTML How to use the Github API The image tag, anchor tag and the button tag Ordered and Unordered Lists in HTML The division tag HTML Forms Tables in HTML Introduction to C Programming Introduction to Python Varibles and Datatypes in Python Operators in Python Typecasting in Python Input and Output in Python If Else in Python Loops in Python Break, Continue and Pass in Python Python practice section 1 Lists in Python Tuple in Python

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.