How to Use Div and Span in HTML and CSS

Div and span elements often confuse people new to HTML and CSS, because they aren't semantically meaningful elements like headings, lists and paragraphs. In this article I'll explain what div and span should be used for.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• A page of HTML

1. Although div and span are HTML elements, it may make more sense to you if you think of them as containers--or as containers with hooks. By hooks I mean class or id attributes that link the generic containers div and span to a CSS rule.

2. A div is a container that is meant to contain a page division. That page division might be a sidebar, a menu, a header, a content area, a widget, an attention grabber or a footer. With an appropriate class or id hooked to CSS, a div creates a defined and styled structural area on the page.

3. The div gives you a way to group content and style it accordingly. A div is a block-level element and is generally used to group meaningful sections of the page into connected blocks that can be styled and placed as needed. Most CSS layouts depend on the use of divs to create sections of the page that can be styled to create sidebars, headings and content areas. A div can hold block-level elements such as headings, paragraphs and lists. And it can hold inline elements such as images and spans.

4. A span is a generic container also. It is an inline element--meaning it is used in a line of text. With a class or id, a span can be styled to create an appropriate appearance for any inline element enclosed in the span. A span can enclose a sentence or phrase that needs styling. For example, a span might enclose a few words that you wish to call attention to--or a few words that might form an error message when a required form field is left blank.

Tips & Warnings

• Don't use a span when an existing HTML element can do the job. For example, if you just want to emphasize text, use the em tag and style it accordingly. You don't need a span.