DIV, SPAN, ID and Class

Reading: We strongly suggest you read chapter 10 of Head First HTML and CSS with these notes.

The container tags: <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.

mockup of a page with divs
This page can be created by defining each part as a <div>.

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.

code for showing a div and span result of code for showing a div and span
Example of using <div> and <span> in HTML.

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.

The role of DIV and SPAN

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,

The attribute 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.

html code for attribute class css code for attribute class the result of using the class attribute
The HTML and CSS code for using the class attribute and their result.

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.

It is important to note the two different ways in which the selector is defined in the CSS rules. Both ways are allowed and have a distinct use. 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.).

The attribute 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.)

example of using id with div elements
An example of using the id attribute for page organization.

The symbol used to refer to the id value (as in the fragment URL) is #, known as the pound sign in the U.S., but as the hash sign in the rest of the world.

Here is an example of using an id value in the selector of a CSS rule. Notice that you never make use of the attribute names id or class in a CSS file.

div#main {
    width: 800px;
    background-color: lightgray;

© Wellesley College Computer Science Staff. This work is licensed under a Creative Commons License. Date Modified: Sunday, 28-Aug-2016 13:05:26 EDT