Containers

Tags
Structure
Summary

Use div and span to wrap HTML so you can style it as a block.

Situation

You have a block of content made of several HTML tags. You want to style the block.

Action
  • Use div and span containers for content.
  • Style the containers, usually with classes.

For example, you want to make this:

Attention

Use a div to group the content in the box, then style the group. For example:

  • <p>
  •     Big ol pupper you are doing me a frighten. Doggo boof vvv such treat pats, porgo shoober borking doggo.
  • </p>
  • <div class="attention">
  •     <h3>Attention</h3>
  •     <p>
  •         Sub woofer bork puggorino long bois, snoot blop.
  •     </p>
  • </div>
  • <p>
  •     Puggo blep the neighborhood pupper.
  •     Aqua doggo waggy wags, you are doing me a frighten boof.
  • </p>

Here's the CSS:

  • .attention {
  •     border: lightgrey 4px solid;
  •     border-radius: 4px;
  •     padding: 1rem
  •     margin: 2rem;
  • }

You can reuse the class, embed other classes, whatever you want.

  • <div class="attention">
  •     <h3>Alert</h3>
  •     <p>
  •         Puppers ahoy!
  •     </p>
  •     <p>
  •         Puppers are coming!
  •     </p>
  •     <p class="celebrate>
  •         Puppers are the best!
  •     </p>
  • </div>
Where referenced
Divs and spans