Wednesday, June 30, 2010

div vs span element

SkyHi @ Wednesday, June 30, 2010
There are a couple of generic HTML tags called
and which have no real semantic meaning. They're not paragraphs or headings or list items or table cells or links, or any other meaningful tag like the ones we've talked about up until now. The
and tags don't mean anything from a semantic or grammatical point of view. Their primary purpose is to allow web developers to apply styles to areas within the web page that are not easily defined by other kinds of tags. Note: By the way, if you're wondering what "semantic" means, here's one definition: "Of or relating to meaning, especially meaning in language" (from the American Heritage Dictionary). Headings, paragraphs, list items and all those other things provide meaning to text. The
and elements do not.


Sometimes you want to apply a style to the semantic elements (headings, paragraphs, etc), but sometimes it makes more sense to apply styles to a chunk of text that doesn't really fit into a semantic unit. Maybe you want to apply a style to four paragraphs, or to three words. In these cases it sometimes makes sense to use a unit that can successfully group the items, but which doesn't apply any semantic meaning. In the example screenshot below, a border was applied around two paragraphs, but not around the others. The border groups the paragraphs visually.
The XHTML code looks like this (with the paragraph text shortened):
Paragraph here, etc., etc.
Paragraph here, etc. etc. Paragraph here, etc. etc.
Paragraph here, etc. etc.
The CSS code looks like this:
#border_here {
  border: red solid 5px;
  padding: 1em;
To give another example, you might want to create a visual column of text. A column doesn't really have semantic meaning. Columns are just ways of formatting the text. If you have a two-column article and convert it to one column, you haven't lost any meaning. You've only lost the visual formatting. You can create column-like effects by grouping the text using
tags and then applying the appropriate styles.

The Element

The element allows you to apply styles to an inline section of code.
This is a paragraph with a highlighted phrase inside it.
Notice that there is an opening element and a closing element. The "highlight" class will be applied to the text in between the opening and closing tags.

Block vs. Inline

At this point it would be good to revisit the idea of block level content versus inline content.
  • For generic block level elements, use
  • For generic inline elements, use
tag is a block level tag. That means that anything within the
tag takes up a rectangular "block" of visual space. Without any extra styles, this block of space extends all the way across the browser window. For the sake of illustration, I've created a
tag below and applied a background color of purple so that you can see what it looks like.
This text is inside of a
Using styles, I can make this block of text as wide or high as I like. I can change the color, add a border, and do all kinds of fancy things with it. But the main point for now is that a
is a rectangle that starts on a new line, meaning that you can't insert a
in the middle of a paragraph or any other semantic block level tag. The tag, on the other hand, is an inline tag. Inline tags can be added in the middle of block level tags. They can even be added in the middle of other inline tags. They don't start on a new line. They don't change the flow of the text. Other inline tags include links, and .
In this paragraph, I've created a span around these words. Like the
example above, the is styled to give the text a purple background. the difference is that the is within the paragraph, and does not cause the text to start on a new line. Reminder: Neither the
nor the which I created give the text any additional meaning. They only change the color of the background. The
and elements can be useful under some circumstances to enhance visual appeal. They're not good for conveying extra meaning. A blind person using a screen reader will not know that the background color has changed. In fact, screen readers ignore styles almost completely. (There are a few exceptions to this, but a discussion of those exceptions would take us beyond the scope of this lesson.) If you use styles or colors to try to convey meaning (for example, by saying "all the green words are important"), you are probably going to make the content inaccessible to a person using a screen reader, since they can't see the styles. Question: Which methods can you use to apply styles to
and elements? Answer: You can use any of the methods already discussed. You can apply a style to all
or tags, or you can apply a style to only one
or tag using the id attribute, or you can apply a style to multiple tags, including
and , using the class attribute. All methods are ok.