<div>
, <span>
, class, and id.<div>
and <span>
<header>
, <section>
, or <nav>
were introduced in HTML5,
there was one single tag that was used for all 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 other
tags, it contains small portions of text inside other tags. 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 parts of text such as geographical locations, people names, 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).
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; }