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:
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: