Home

Chapter 2: Heading & Paragraph

Topics we are going to learn in this page:

1. h tag
2. p tag
3. br tag
4. pre tag
5. hr tag
6. title attribute

Explantion of the topics:

1. h tag

   • <h1>...</h1> to <h6>...<h6> represent 6 level of heading.
   • <h1> is the highest level and <h6> is the lowest level.
   • A page should generally have a single <h1> element that describes the content of the page.
   • We should not used h tag just to increase font size.(With css we can make font of a h6 heading bigger than h1 heading). H tag should only contains main hading and sub headings of the web page content for proper structuring.
   • We should not skip in between level between 2 h tag level. Alwayes 1st <h1> then <h2>, <h3>, <h4>, <h5> and finally <h6>.
   • Example:

     Code:

         <h1>Heading level 1</h1>
         <h2>Heading level 2</h2>
         <h3>Heading level 3</h3>
         <h4>Heading level 4</h4>
         <h5>Heading level 5</h5>
         <h6>Heading level 6</h6>                             
                             

     Output:

     Heading level 1

     Heading level 2

     Heading level 3

     Heading level 4

     Heading level 5

     Heading level 6

   ---

2. p tag

   • <p> tag represents a paragraph.
   • "p>lorem20 + enter key" - to create a auto generated paragraph (here 20 is the number of words)
   • Example:

     Code:

         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere excepturi nihil sed quisquam beatae vitae repellendus inventore nemo fuga praesentium.</p>
                             

     Output:

     Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere excepturi nihil sed quisquam beatae vitae repellendus inventore nemo fuga praesentium.

   ---

3. br

   The <br> HTML element produces a line break in text. It is useful for writing a poem or an address, where the division of lines is significant.

   ---

4. pre

   The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file.

   Example:
   Code:

                   <pre title="Cow">
   
                       ^  ^
                       (oo)\_______
                       (__) \       )\
                           ||----w |
                           ||     ||
   
                   </pre>
               
               

   Output

                      ^  ^
                      (oo)\_______
                      (__) \       )\
                           ||----w |
                           ||     ||
               

   ---

5. hr

   The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. Most often displayed as a horizontal line

   Example: code: <hr>, Output: the horizontal line displayed in this page after every topic

   ---

6. title attribute

   The title attribute is used to specify extra information about the element. When the mouse moves over the element then it shows the information. This is a global attribute, means it can be used with every html elements or tags.

   Example:
   Code:

       <p title="This paragraph is an example of to show what tital attribute can do.">  
           This is an example. One another example is the above cow diagram in the <pre> tag example, move the mouse over the cow diagram and see the text writing on the tital of that pre tag.  
       </p>
               

   Output:

   This is an example. One another example is the above cow diagram in the <pre> tag example, move the mouse over the cow diagram and see the text writing on the tital of that pre tag.