HTML BLOCKS

a couple of years ago

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 and takes up the full width available. For example the <p>, <h1>, <ul>, <ol>, <pre>, <hr />, <blockquote>, and <address> .

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 like The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <cite> and <var> 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) <div> tag

(ii) <span> tag

The <div> tag

This block level tag helps in grouping various other HTML tags and applying CSS on group of elements.

<div> tag can be used to create webpage layout where we define different parts ( Left, Right, Top etc) of the page using <div> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS.

Following is a simple example of <div> tag.

You get the following result:

This is first group

Following is a list of chinese food

  • Sweet And Sour Pork
  • Spring Rolls
  • Dumplings
  • Chow Mein
  • Peking Roasted Duck

This is second group

Following is a list of Indian Food

  • Biryani
  • Bisi bele bath
  • Bonda
  • Chicken 65

The <span> tag

The HTML <span> 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 where as the <div> tag is used with block-level elements.

Following is a simple example of <span> tag.

This gives the following result:

We provide both non-vegetarian and vegetarian food.

PS: For any questions, queries, feedback and comments feel free to write us at support@qatechhub.com and amruta@qatechhub.com

Amruta Somani

About the Author

Amruta Somani

Leave a Comment: