Tools of the Trade

Lesson 9: Introduction to Divs and Spans

The div tag stands for division and it is used to divide different blocks of content. The span tag is used to select and spans across inline blocks of content. Effectively, both of these are just containers around content.

Difference Between Div and Span

The div tag has a CSS property of display: block;, meaning it stretches out as far as it can until it touches the container around it. The span tag has a CSS property of display: inline;, meaning it takes up only the space around the specific content selected.

Demo of difference between a div and span


Common Uses of Divs and Spans

Styling Specific Sections of Content

Divs and spans can be used to apply styling to specific sections of your content.

Demo of styling specific sections of your content with code sample below:


Creating Layouts

One common usage of the div tag is designing layouts in HTML. For example, a basic layout for a website includes a header, left navigation, content area and footer.

Demo of basic HTML layout with code sample below: