The div and span tags, style containers

You have already learned quite a few new tags, and each one has its own meaning. But sometimes you just want to elegantly highlight a short piece of text or a few paragraphs without imparting any additional significance to them. For example, to highlight what you believe are the most dangerous “diseases” that web designers are susceptible to by applying a crimson background.

But since calling out text in this way does not give it any meaning, we don’t want to enclose this text using a “semantic” tag and therefore imply a meaning that it doesn’t have.

But there are also two special tags that do not have any “meaning”. These are the <div> (which is short for “division”) and <span> tags. These are “clean” elements that are great for visually grouping together other items. It is recommended that you only use these tags if you cannot find any suitable semantic tags.

The <div> and <span> tags have no default appearance, and they are almost always used together with the class attribute, which allows you to easily add your own styles to them.

The <div> tag is typically used to group major elements, such as multiple paragraphs, or as a container for creating page layouts. By contrast, <span> is used for highlighting small text elements: parts of words or individual words or phrases consisting of several words:

<article>
  <div class="highlight">
    <p>We are two nicely highlighted paragraphs.</p>
    <p>We have a yellow background!</p>
  </div>
  <p>Text containing <span>a highlighted phrase</span>.</p>
</article>

In this assignment, we will use the <div> tag as a wrapper for items in the definition list. In this case, the list items that are not enclosed in a <div> should not be enclosed in the the <dl> tag. We either enclose all of the elements, or we leave all of the <dt> and <dd> tags without wrappers.

After completing this step, you can download the intermediate version of our Website of a beginning web designer at this link.

We have prepared styles for highlighting text and blocks. Pay attention to the style.css tab.