Tutorial Manthra

In Html you can group several contents together to make sections or subsections in a page.  Grouping content makes it easier to manage the content. It is easier for both the programmer and readers as it looks good while we group similar contents together.

You can also add special style to a special group using CSS.

For example you can group all the header elements to one group, the body elements to another group and the footer elements to another group and add special styles in CSS. You can also create another group inside the header group to add all the menu items in it.

In Html the tags available for grouping contents are <div> and <span>

Grouping using Div element

You can use the <div> tag to group elements in html. The <div> tag is the most used grouping element in html. The <div> tag stretches to the whole page or the whole container. The contents before and after the Div element will be displayed in separate lines. In the examples below we add a border to the grouping element to easily understand it.

Example

<div style="border:1px solid grey;">This is a group of text</div> 

Output

Grouping using Span element

Span is an inline grouping element. The text written before and after the <span>….</span>element all will be displayed in a single line.

Example

<span style="border:1px solid grey;">This is another group of text</span>

Output

Difference between Div and Span Element

Div and span both are used to group elements in html. The main difference between Div and Span elements is that Div is a block element and Span is an inline element. That means the width of the div stretches to the whole page or the whole container, while the width of the Span stretches only to the content inside the Span.

To easily understand this we add a border to both the div and span element using the CSS and see how it looks.

Example

<div style="border:1px solid grey;">Div Element</div> 
<span style="border:1px solid grey;">Span Element</span>

Output

Span can be added inside the div element without affecting the flow of the text while div cannot be added to span as it affects the flow of text. 

Example for Span inside Div

<div style="border:1px solid grey;">
      The Div contains a 
      <span style="border:1px solid red;">Span Element</span>
</div>

Output

Example for div inside span. See the code gives unexpected behavior

<span style="border:1px solid grey;">
      This Span contains a
      <div style="border:1px solid red;">Div Element</div>
</span>

Output

Now let us see how grouping the content really works

<div id=”header” style="border:1px solid grey;">
	<div id = "menu">
		<a href = ./">HOME</a> | 
		<a href = "about-us.htm">ABOUT</a> |
		<a href = "contact-us.htm">CONTACT</a> 
	</div>
</div>
<div id=”main-content” style="border:1px solid grey;">
	…….......................<br>
		Main <br>
		Content <br>
		goes <br>
		here <br>
	……….......................
</div>
<div id=”footer” style="border:1px solid grey;">
	…….Footer Content Goes here………….
</div>

Output

Here we haven’t used any styles other than the border. We can style it better by using CSS styles. We will learn that later in the CSS tutorials.