Essential front-end development

HTML Elements

Dividers

The HTML <div> tag is used to group relevant content together in a separate container. The <div> tag has no effect on the layout nor content of the page.

The tag might seem useless right now, but it will show its full strength later on when combined with CSS, which makes it possible to target <div>s based on their id or class attributes and style them accordingly.

Code example

<div class="shadowedBox greenBox">
    <ul>
        <li>Guide to Troubled Birds</li>
        <li>Papillon</li>
        <li>Foundation</li>
    </ul>
</div>

has the potential of producing the box below (given some styling)

  • Guide to Troubled Birds
  • Papillon
  • Foundation

Read more on MDN

<div>: The Content Division element

Test yourself

Description

Add an HTML content division box where id equals

details

The div should contain an <h3> heading with the title

The Road

and an <h4> heading below it with the title

by Cormac McCarthy

Tests

  1. 1 You should create a content division box.
  2. 2 Your div element should have a closing tag.
  3. 3 Your div element should have the id specified in the description.
  4. 4 Your div element should contain an h3 element with the title specified in the description.
  5. 5 Your div element should contain an h4 element with the title specified in the description.
Editor
Preview
Run tests (ALT+Q)
PrevNext