Lesson 15 – HTML Block Elements

All HTML element can be categorised into two groups namely (i) Block Level Element and (ii) Inline Element.

  • Block Level Elements:

Block level elements are self contained elements, which have their own set of functions and can’t mixed with other elements. For example: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <form>,  etc.   These elements always starts from a new line. 

  • Inline Elements: 

Inline elements on the other hand work in conjunction with block level elements. They are used to give special effect to block level elements. For example <b>, <i>, <a>, <img> etc. These elements don’t start from a new line.

Grouping of Block Level & Inline Elements

We further use html <div> element and html <span> element to to group above two elements (Block level and Inline).

  • Html<div> element:

Html <div> element divides a html page into different sections. It works like a container, where all Block level elements can be grouped together. This helps us to apply CSS styles to one particular group at once. For example if you want to use red color font for first paragraph and blue color font for second paragraph, than you can use html<div> element to create two groups. 

Example of <div> element-

<!DOCTYPE html>
<html>
<head>
<title> Div Element Example</title>
</head>
<body><!– First group –>
<div style=”color:red”>
   <h2>This is first group</h4>
      <ul>
        <li>Pen</li>
        <li>Pencil</li>
        <li>Eraser</li>
   </ul>
</div><!– Second group –>
<div style=”color:blue”>
   <h2>This is second group</h4>
       <ul>
         <li>Football</li>
         <li>Basketball</li>
         <li>Tennis Ball</li>
       </ul>
</div></body>
</html>

The result will be displayed as:

  Div Element Example

This is first group

  • Pen
  • Pencil
  • Eraser

This is second group

  • Football
  • Basketball
  • Tennis Ball
  • Html <span> element:

Html <span> element is used to contain html inline elements. It help us to style html text part. The basic difference between html<div> element and html <span> element is that <div> group all block level elements and <span> group all inline elements. 

Example of <span> element-

<!DOCTYPE html>
<html>
<head>
<title>Span Element Example</title>
</head>
<body> <p> Let us <span style=”color:blue”>learn </span> html at <span style=”color:green”>free tutorial point.</span></p> </body>
</html>

The result will be displayed as:

 Span Element Example

Let us learn html at free tutorial point.

 

Chapter Summery:

  • html <div> tag is used to group block level elements.
  • html <span> tag is used to group inline elements.

 

Interview Questions:

  • What is the difference between html <div>tag and html<frame> tag.

Html <div> tag act as a container for block level elements and is used for styling purpose. Whereas, html <frame> tag divides a html page into different sections.

  • What is the use of <div> tag?

Html <div> tag is used  to group block level elements. This help us to apply CSS style setting to a particular group at once.   

  • What is the use of <span> tag?

Html <span> tag can be used to change font color, text background color and highlighting a particular text etc. in a html page.

 

Practice Exercise:

<!DOCTYPE html>
<html>
<head>
<title> Practice Exercise</title>
</head>
</body>
<!–First Group–>    
   <ul>
        <li>Pen</li>
        <li>Pencil</li>
        <li>Eraser</li>
   </ul> <!– Second group –>
       <ul>
         <li>Football</li>
         <li>Basketball</li>
         <li>Tennis Ball</li>
       </ul>

</body>
 </html>

In above html code,

  • Change the first group text color to green and second group text color to blue.
  • In first group, use html <span> tag and change color of text ‘Pen’ to blue, ‘Eraser’ to green.
  • In second group,  use html <span> tasg and change color of text ‘Football’ to brown and ‘Basketball’ to pink.

Click here to practice above exercise in real time HTML code editor

Leave a Reply

Your email address will not be published. Required fields are marked *

3 + 5 =