HTML - Blocks

HTML blocks plays a very crucial role in creating a logical and semantic layout of a web page. They help to organize the content into meaningful sections and make it easier for browsers, search engines, and site visitors to understand the structure and meaning of different parts of the web page.

In HTML, the blocks are enclosed by various elements, such as <div>, <p>, <table> and so on. All the HTML elements can be categorized into two categories namely Block Level Elements and Inline Elements.

Block Elements

Block level elements appear on the screen as if they have a line break before and after them. A few block elements are listed below −

  • Paragraph tag

  • Heading tag

  • List tags

  • Blockquote tag

  • Horizontal Rule tag

They all start a new line on their own, and anything that follows them appears on the next line.

Example

In this example, we are going to use some of the block level elements.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <h3>Block Level Elements in HTML</h3>
   <p>This line will appear in the next line after Heading. </p>
   <hr />
   <p>This line will appear after Horizontal Line. </p>
</body>
</html>

On executing the above HTML code, it will produce one heading and two paragraphs separated by a horizontal line.

Inline Elements

Inline elements, on the other hand, can appear within the same line and do not start a new line on their own. Some common inline elements are as follows: <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var>.

Example

In the following example, we are going to illustrates the use of a few inline elements.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <h3>Inline Elements in HTML</h3>
   <!-- Using <b> tag -->
   <p><b> This paragraph is bold. </b></p>
    <!-- Using <i> tag -->
   <p><i>This is an italic paragraph. </i></p>
</body>
</html>

The above code will generate a bold line and an italic line.

Grouping HTML Elements

There are two ways to group other HTML tags −

  • Using the <div> tag

  • Using <span> tag

The <div> tag

The <div> tag is a block level element which plays a big role in grouping various other HTML tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define different parts (Left, Right, Top etc.) of the web page. 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 <div> tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage 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 element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has more meaning when it is used with CSS.

The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-level elements.

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>
   <p>This is <span style="color:red">red</span> and this is <span style="color:green">green</span>
   </p>
</body>
</html>
Advertisements