HTML - Blocks ~ GoogleTech786

Sunday, 15 October 2017

HTML - Blocks

All the HTML components can be classified into two classifications (a) Block Level Elements (b)Inline Elements.

Piece Elements

Piece components show up on the screen as though they have a line break previously, then after the fact them. For instance, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr/>, <blockquote>, and <address> components are all square level components. They all begin without anyone else new line, and anything that tails them shows up individually new line.

Inline Elements

Inline components, then again, can show up inside sentences and don't need to show up on another line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> components are all inline components.

Gathering HTML Elements

There are two essential labels which we utilize much of the time to amass different other HTML labels (I) <div> tag and (ii) <span> tag

The <div> tag

This is the vital piece level label which assumes a major part in gathering different other HTML labels and applying CSS on gathering of components. Indeed, even now <div> tag can be utilized to make site page design where we characterize diverse parts (Left, Right, Top and so on.) of the page utilizing <div> tag. This tag does not give any visual change on the square but rather this has all the more importance when it is utilized with CSS.

Illustration

Following is a basic case of <div> tag. We will get the hang of Cascading Style Sheet (CSS) in a different section yet we utilized it here to demonstrate the utilization of <div> tag −

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
 
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

The <span> tag

The HTML <span> is an inline component and it can be utilized to gather inline-components in a HTML record. This tag likewise does not give any visual change on the square but rather has all the more importance when it is utilized with CSS.

The contrast between the <span> tag and the <div> tag is that the <span> tag is utilized with inline components though the <div> tag is utilized with piece level components.

Case

Following is a straightforward case of <span> tag. We will master Cascading Style Sheet (CSS) in a different section however we utilized it here to demonstrate the use of <span> tag −

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
 
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
 
</html>