<div>
and <span>
We explained earlier, in the reading
on HTML and semantic tags, that
before tags such as
<header>
, <section>
, or <nav>
were introduced into HTML5,
there was one single tag that was used for structuring purposes: <div>
(short for
division), whose main goal of existence was to serve as a container for other tags.
The <div>
tag made possible the creation of websites
where content could be organized in chunks such as shown in the image below, where the page layout
was defined with CSS, as we will explain in a future lecture.
The <div>
tag remains the most used tag on the Web. In fact, very often
it is overused. The new semantic tags: <header>
, <footer>
,
<nav>
, etc. will slowly replace some of its functionality, but
<div>
will continue to be used for other
purposes, for which a semantic tag doesn't exist.
The <span>
tag is also a container tag,
but instead of containing big blocky parts of a web page, it
contains small portions of text and other tags like EM. (SPAN is
used a lot less than DIV.)
The example
below shows both
<div>
and <span>
in action, making clear their distinction.
We styled only the border
property for the two elements, in order to highlight an
important distinction betweeen the two: how they are displayed. <div>
is displayed
as a block, in the same way as a <p>
or <ul>
.
Meanwhile <span>
is displayed inline (similar to <em>
and <a>
meaning that it doesn't generate
a break within the tag where it is contained. You can use <span>
to style
differently small chunks of text such as geographical
locations, names of people, book titles,
company and organization names, etc., for which an <em>
or <strong>
doesn't make sense (you only want to attract attention that they are different from the surrounding
text). That is, the semantics of EM is to emphasize,
so you probably wouldn't use EM for geographical locations,
names of people, and so forth.
Recall that on the first day of this course, we distinguished between the roles played by the different languages. HTML is for structure and meaning (semantics), while CSS is for style or appearance. The DIV and SPAN tags provide structure but they don't have a meaning. They can, however, have CSS rules defined for them,
class
What happens if in a paragraph we have both author names and book titles?
If we style <span>
as we have done so far, then all <span>
elements will have the same style. We need
thus a way to distinguish between different kinds of <span>
elements. This is done
throught the HTML attribute class
. This attribute allows us to style in the same way
all elements within the same class. See the example below for how to use this attribute in the
HTML and CSS code.
As we can see in the image, the text for all author names is rendered in the same style,
and the text of all book titles is rendered in another style, despite the fact that they all are enclosed
in <span>
elements.
span.author
will
apply only to elements of type <span>
that have the attribute
class="author"
. However, the style for .booktitle
can apply to
any element that has this class attribute (e.g. a <li>
or <em>
, etc.).
id
We have already seen the HTML attribute id
in action
(Hint: fragments in URLs). An id
(short
for identifier) uniquely identifies an element. This means only one element can have
a certain value for this attribute, which is very different from the attribute class
,
where multiple element can share the same class
.
A perfect example for using the attribute id
is shown in the graphics below,
where every <div>
element is unique in the page (there is one header, one footer, etc.)
The symbol used to refer to the id
value (as in the fragment URL) is
Here is an example of using an id
or class
in a CSS file.
div#main { width: 800px; background-color: lightgray; }