5/9

5. Div and Span

Role of anonymous container

Remember that HTML5 define a large number of tags. Although their display can be fully adapted to the expected one, they are attached to a semantic meaning that should be preserved (ex. <p> should be used for a paragraph of text, <h1> for titles, <li> for listings, etc).

In some situations, we may take advantages of grouping together elements, in order to apply a common CSS rule, or grouping them visually. This group may not have a specific semantical meaning excepted that sharing a common visual behavior.

HTML propose two anonymous containers:

  • <div> which has a block-level semantic

  • <span> which has an inline-level semantic.

Syntax

<div> and <span> are commonly used with classes in order to parameterize their appearance in CSS.

Use the following HTML and CSS code, and observe the role of <div> and <span> to group elements with common visual behaviors.

HTML

<div class="rightSide">
<p> This is some paragraph <span class="highlight"> with span <em>elements</em>. </span> </p>
</div>

<div class="center">

        <div class="group1">
                <p> A </p>
                <p> B </p>
        </div>

        <div class="group2">
                <p> C </p>
                <p> <span class="highlight">D</span> </p>
        </div>

</div>

CSS

.rightSide {
        text-align: right;
}

.center {
        text-align: center;
        display: block;
}

.highlight {
        background-color: yellow;
}

.highlight em {
        color: red;
}

.group1 {
        background-color: pink;
        width: 50px;
}
.group2 {
        background-color: lightgreen;
        width: 100px;
}

Exercise

Build a webpage with the following appearance using <div> and classes to model the colored squared elements.

Hint: Colored box can be modeled in setting width, height, and a background color to a <div> element.

layout

Notes on <div> and <span>

  • <div> has a default block display, meaning that a new line is started for each div, while <span> has a default inline display. As any element, these displays can be changed in order to adapt to your expected layout.

  • <div> is allowed to contain <span> elements. However, <span> elements should not contains <div>. Remember that <div> has a block-level semantic, while <span> is an inline-level semantic. Even if you change their display in CSS, their semantic-level should be preserved by your structure.

  • Every HTML webpage visual layout can be fully defined using only <div> elements in place of other one such as <hi>, <p>, <li>, etc. However, your webpage would lose its semantic structure, and this is considered as bad practice. Prefer using when appropriate named tag with semantic meaning, and restrain the use of <div> to groups without semantic.