Generic Containers: Div and Span

Generic Containers: Div and Span
Table of Contents
  1. Division Tag
  2. Span Tag
  3. The Takeaway
namecheap placeholder image

HTML tags are supposed to give meaning to the content inside, but not in the case with div and span tags. They exist mostly to be able to apply CSS styles or target with JavaScript by applying a class or id attribute to them.

Division Tag

The div tag represents a generic container. The reason why it is a container is because it defaults to a block. As a block, it starts on its own new line, similar to how p tags work.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Div</title>
		</head>
		<body>
			<div>Division 1</div>
			<div>Division 2</div>
			<div>Division 3</div>
		</body>
	</html>
	
Dividers are block elements.
Dividers are block elements.

Span Tag

The span tag accomplishes the same thing as a div tag except that it is inline, which essentially means that it wraps content but remains inside the same line, and does not start on its own line.

This means you can do something like this:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Span</title>
		</head>
		<body>
			<p>The <span class="space">Solar System</span> is a cool place.</p>
		</body>
	</html>
	
Span are inline elements.
Span are inline elements.

You can now apply styles to your space class and it will only affect the text "Solar System". Pretty cool, huh?

bluehost placeholder image

The Takeaway

In general, these tags should be used as rarely as possible, as they do not describe the content inside them at all. Whenever possible, and when it makes sense, use alternative tags to give meaning to the content between the tags.

In our next lesson, we'll explore the opposite of these tags, and take advantage of the more semantic tags!