There are a couple of generic HTML tags called
and
and
and The
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):
The Element
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.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
TheThis is a paragraph with a highlighted phrase inside it.
Notice that there is an opening 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
tag.
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
In this paragraph, I've created a span around these words. Like the
In this paragraph, I've created a span around these words. Like the
example above, the
nor the
and
and
or
or
id attribute, or you can apply a style to multiple tags, including and
REFERENCES
http://www.paulbohman.com/web/css/div_span
class attribute. All methods are ok. REFERENCES
http://www.paulbohman.com/web/css/div_span
