Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, i talked about the Html iframes and how to apply it on a web page. In this tutorial guide am going to be talking about Html blocks and the types we have.
All Html elements can be grouped into two different categories (a) Block Level Elements (b) Inline Elements. Now without wasting much time lets quickly take a look at the both of them.
Block Elements
The Html block elements show on the screen as if they have a line 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 elements. They all start on their own new line, and anything that follows them appears on its own new line.
You can also read our tutorial post on: Html Attribute 2
Inline Elements
Inline elements, on the other hand, can show within sentences and do not have to show on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> tags are all inline elements.
Grouping HTML Elements
There are two important tags that can be used to group various Html tags.
1. <div> tag
2. <span> tag
The <div> tag
The div tag is a very important block level tag which plays a vital role in grouping various Html tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define parts or sections of the webpage 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.
Example
Below is a very simple and short example of how to use the <div> tag to group various tags. CSS will be treated in a seperate tutorial soon enough but it will be applied here to show the usage of the <div> tag.
You can also read our tutorial post on: Html Basic Tags
<!DOCTYPE html>
<html>
<head>
<title>Div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style="color: blue">
<h5>This is the first group</h5>
<p>Following is the list of games</p>
<ul>
<li>Ps4</li>
<li>Ps3</li>
<li>Ps2</li>
<li>Xbox360</li>
<li>Psp</li>
</ul>
</div>
<!-- second group of tags -->
<div style="color: green">
<h5>This is the second group</h5>
<p>Following is the list of foods</p>
<ul>
<li>Beans</li>
<li>Rice</li>
<li>Yam</li>
<li>Indomie noodles</li>
<li>Bread</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>Div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style="color: blue">
<h5>This is the first group</h5>
<p>Following is the list of games</p>
<ul>
<li>Ps4</li>
<li>Ps3</li>
<li>Ps2</li>
<li>Xbox360</li>
<li>Psp</li>
</ul>
</div>
<!-- second group of tags -->
<div style="color: green">
<h5>This is the second group</h5>
<p>Following is the list of foods</p>
<ul>
<li>Beans</li>
<li>Rice</li>
<li>Yam</li>
<li>Indomie noodles</li>
<li>Bread</li>
</ul>
</div>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below.
The <span> tag
The Html <span> tag is an inline element and it can be used to group inline elements in a Html document. This tag also does not provide any visual change on the block but has more meaning when applied with CSS.
Example
Below is a very simple and short example of how to use the <span> tag to group various tags. CSS will be treated in a seperate tutorial soon enough but it will be applied here to show the usage of the <span>
tag.
<!DOCTYPE html>
<html>
<head>
<title>Span Tag</title>
</head>
<body>
<p>This is <span style="color: red">red</span> and this is
<span style="color: blue">blue</span>
</p>
</body>
</html>
<html>
<head>
<title>Span Tag</title>
</head>
<body>
<p>This is <span style="color: red">red</span> and this is
<span style="color: blue">blue</span>
</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below.
Alright thats it for this tutorial, in my next tutorial i will be talking about Html backgrounds, bye for now.