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 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.
<!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 chinese food</p> <ul> <li>Sweet And Sour Pork</li> <li>Spring Rolls</li> <li>Dumplings</li> <li>Chow Mein</li> <li>Peking Roasted Duck</li> </ul> </div> <!-- Second group of tags --> <div style="color:green"> <h4>This is second group</h4> <p>Following is a list of Indian Food</p> <ul> <li>Biryani</li> <li>Bisi bele bath</li> <li>Bonda </li> <li>Chicken 65</li> </ul> </div> </body> </html>
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.
<!DOCTYPE html> <html> <head> <title>HTML span Tag</title> </head> <body> <p>We provide both <span style="color:red">non-vegetarian</span> and <span style="color:green">vegetarian</span> food</p> </body> </html>
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
