English 中文(简体)
HTML Tutorial

HTML References

HTML Resources

Selected Reading

HTML - Blocks
  • 时间：2024-11-03

HTML - Blocks

Previous Page Next Page  

All the HTML elements can be categorized into two categories (a) Block Level Elements (b)Inpne Elements.

Block Elements

Block elements appear on the screen as if they have a pne break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new pne, and anything that follows them appears on its own new pne.

Inpne Elements

Inpne elements, on the other hand, can appear within sentences and do not have to appear on a new pne of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <p>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inpne elements.

Grouping HTML Elements

There are two important tags which we use very frequently to group various other HTML tags (i) <span> tag and (ii) <span> tag

The <span> tag

This is the very important block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements. Even now <span> tag can be used to create webpage layout where we define different parts (Left, Right, Top etc.) of the page using <span> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS.

Example

Following is a simple example of <span> tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage of <span> tag −

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

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

This will produce the following result −