Guidance portal

World of Guidance and Education

Insert Paragraphs and Headings:

This chapter consist of two topics,

  • How to insert paragraph?

  • How to insert headings?

Lets start

Insert paragraph:
<p>

Paragraphs subdivides the content of webpage for comfortable reading and providing concepts. In this topic we will learn to insert one paragraph to multiple paragraph on webpage. As you know HTML is the language of tags therefore for inserting paragraph there should be a tag. The tag of paragraph is <p>and for clossing is </p>.

Sytnax for inserting the paragraph is written below:

     <p>
    your paragraph you want to write
    </p>

     

Note

Line break (<br/>) is the one of the unique tags which does not depend on opening and closing tags. Just insert the <br/> tag to start new line.

Line Break:

If the requirment is to start a new line without starting the new paragraph you may use "Line Break". Line break breaks the line without starting new paragraph. The tag for line break is <br/>. You have noticed that this tag does not have any opening and closing tag.

Multiple paragraph:

Inserting multiple paragraph is simple. Just insert multiple paragraph tags as shown in the code below to insert multiple paragraphs.

    <p>
    your first paragraph goes here
    </p>

    <p>
    your second paragraph goes here
    </p>

    <p>
    and so on, keep inserting paragraphs
    </p>


Note

When you insert paragraph it atomatically generates a line break so no need to insert line break after inserting a paragraph.

Lets see how these paragraphs will be displayed on browser:

The code written below inserts two paragraphs in the webpage. Please carefully read the code and then see the brower view.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <p>
    hellow i am your first paragraph ...continue
    </p>

    <p>
    hellow i am your second paragraph
    </p>
    </body>
    </html>

     browser view

Now move to our second topic that is how to insert headings?

Insert Headings:
<h>

Headings are used to divide the Major concepts of a topic into sub concepts for better navigation of information and giving different levels of importance to different pieces of information. As a results different levels of headings are used. Normally level 1 is the major heading representing major topic, level 2 is subheading representing a sub topic under the major topic, level 3 is sub-sub heading reprsenting sub-sub topic under the level 2 sub topic and so on.

HTML enables to insert headings upto six levels, starting from heading 1 and ending on heading 6. Each level of heading has its own "opening and closing tag" as shown below:

    Heading Level Opening Tag Closing Tag Importance (purpose)
    Heading 1 <h1> </h1> Most Important (Major Topic)
    Heading 2 <h2> </h2> Subheading under h1
    Heading 3 <h3> </h3> Subheading under h2
    Heading 4 <h4> </h4> Subheading under h3
    Heading 5 <h5> </h5> Subheading under h4
    Heading 6 <h6> </h6> Subheading under h5

For example if you want to insert the most importand heading then insert the heading which is <h1>, then <h2 >which is less important as compare to <h1> and so on. Do not forget to close the tag of each heading.

    <h1> your heading </h1>

and for h2

    <h2> your heading </h2>

Note

Use <h1>and <h2> on your web page. Search engines serach these two headings in webpage contents.

Lets see how these headings will look like on the web. Please carefully read the code first and then see the live preview.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <h1>this is your required heading</h1>
    <h2>this is your required heading</h2>
    <h4>this is your required heading</h4>
    <h4>this is your required heading</h4>
    <h5>this is your required heading</h5>
    <h6>this is your required heading</h6>
    </body>
    </html>

    Browser view

 

comments powered by Disqus