Grouping Elements | HTML CSS Guide

Grouping Elements <div> and <span>

Two tags which you will find very useful when we look at CSS are <div> and <span>. Prior to working with CSS these tags don’t do anything particularly exciting. Their role is to group content such that styles can be applied to that grouped content via CSS. The <div> identifies blocks of content, the <span> tags inline content.

The <div> Tag

The <div> tag is short for (logical) division. It is used to place content of a HTML documents in blocks. This is useful when you identify a group of tags which together produce a distinct part of the document such as heading, footer or menu.

A <div> tag can have both class and id attributes such that classes and ID selectors can be applied to their content. We’ll see what class and id do when we consider CSS.

As a ‘block’ element the <div> is like other block elements such as <h1>, <h2>, <li> in that it creates a line break. The following code places each section on a new line.

      <div>Heading</div>
<div>Main Content</div>
<div>Footer</div>
     
    

However unlike the <p> and heading elements, you can place other block elements inside of the <div> including other <div> tags.

This is a very simple example but the idea could be extended such that groups of tags that made up the document heading, main content and footer are blocked together by <div> tags. An example would be as follows:

      <div id="container">
    <div id="header">
	<h1>Sheffield Winter Gardens</h1>
	<h2>Part of Heart of the City Project</h2>
    </div>
    <div id="content">
	<p>Sheffield's Winter Garden …………………</p>
	<p>The Winter Garden is part of the city's 'Heart of the City' project …………..</p>
	<p>The garden contains more than 2,500 plants from all around the world……….</p>
	<p>The Winter Garden will be open daily to ……………….</p>
    </div>
     <div id="footer">
	<p>Page Maintained by Martin Cooper</p>
      </div>
</div>
     
    

<div> soup

The <div> tag is so widely used by designers when creating complex page layouts, that their code is sometimes referred to as <div> soup. Thus why is is better to use semantic elements such as <header>, <main> and <footer>

The <span> Tag

The <span> tag provides an inline container around document content. It is mainly used to allow styles to be applied to text that has no obvious HTML wrapper. Most commonly the <span> is used in association with a CSS selector known as a class (more later).

For example consider the text below:

      
<p>
Sheffield's Winter Garden is one of the
largest temperate
glasshouses to be built in the UK.
</p>

Assume we want to style the word largest. There is no natural container that would allow us to do so therefore we would need to add a <span> tag. We can place the <span> tag around the text. The <span> tag on its own with have no visual effect on the document. However, later on we can associate CSS with the <span> to style its content.

      <p>
Sheffield's Winter Garden is one of the
<span class="highlight">largest</span> temperate
glasshouses to be built in the UK.
</p>
     
    

Whereas the <div> is a block level tag, <span> is inline. As such <span> does not create a line break and works in the same fashion as <strong> and <em> we saw earlier.