02. Grouping Elements

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> tag inline content.

The <div> Tag

The <div> tag is short for (logical) division. It is used to place the content of 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.

Like other HTML tags 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 the <div>, including other <div> tags.

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

<div class="container">
<div class="header">
    <h1>Sheffield Winter Gardens</h1>
    <h2>Part of Heart of the City Project</h2>
</div>
<div class="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>

In index.html review the <div> elements used to divide the document.

How many <div> tags are there?

Why do you think the document has been divided in this fashion?

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 will 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 familiar tags such as <strong> and <em> that we saw earlier.