18. HTML Blocks

 

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

Block Elements

Block elements appear on the screen as if they have a line break before and after them. For example the ,

,

,

,

,

,

,

,
,

,

, 

, 

, 
and 


 elements are all block level elements. They all 
start on their own new line, and anything that follows them appears on 
its own new line.

Inline Elements

Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The , , , , , ^{, _{, , ,}}

, , , , , , , and elements are all inline elements.

Grouping HTML Elements

There are two important tags which we use very frequently to group various other HTML tags (i)

tag and (ii) tag

The

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

tag can be used to create webpage layout where we define different parts ( Left, Right, Top etc) of the page using

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

tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage of

tag:

<!-- First group of tags 

   

This is first group
Following is a list of vegetables


   

Beetroot
Ginger
Potato
Radish




   

This is second group
Following is a list of fruits


   

Apple
Banana
Mango
Strawberry

--> This will produce following result:

This is first group

Following is a list of vegetables

• Beetroot
• Ginger
• Potato
• Radish

This is second group

Following is a list of fruits

• Apple
• Banana
• Mango
• Strawberry

The tag

The HTML 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 tag and the

tag is that the tag is used with inline elements where as the

tag is used with block-level elements.

Example

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

This is red and this is green

• Tweet
• Share
• Share
• Share
• Share