H9 - Divs

01 - What does a div do?

A <div> is a general container. div comes from division: a section, area or piece of your page.

A div is a general piece of a page.
A div has no meaning by itself.
A div is useful as a box for CSS.
Use a div when no better HTML element exists.

<div class="card">
    <h2>News</h2>
    <p>Here is a short message.</p>
</div>

Practice

Create a small container example that fits this section.
Check whether the container logically wraps the content and is closed correctly.

02 - Div is general, semantic tags have meaning

Semantic HTML elements describe the role of the content.

<header>: top area or introduction.
<nav>: navigation links.
<main>: main page content.
<section>: a section of related content.
<article>: content that can stand on its own.
<aside>: extra or side information.
<footer>: bottom area or closing information.

Practice

Create a small container example that fits this section.
Check whether the container logically wraps the content and is closed correctly.

03 - When do you use a div?

Use a div for styling groups that do not have a clear semantic meaning.
Use a div as a wrapper when CSS needs one extra box.
Do not use divs for everything automatically.

Practice

Create a small container example that fits this section.
Check whether the container logically wraps the content and is closed correctly.

04 - No creative id names for layout

Avoid layout names that only make sense to you. Prefer meaningful names such as main-menu, product-card or page-footer.

Practice

Create a small container example that fits this section.
Check whether the container logically wraps the content and is closed correctly.

05 - What does float do?

float was originally meant to let text flow around an image. It was also used for layouts in the past, but modern layouts usually use flexbox or grid.

img {
    float: left;
    margin-right: 16px;
}

Practice

Create a small container example that fits this section.
Check whether the container logically wraps the content and is closed correctly.

06 - Float is no longer the best layout method

Use float only when you really want text to wrap around something. For page layout, use flexbox or grid instead.

Practice

Create a small container example that fits this section.
Check whether the container logically wraps the content and is closed correctly.

07 - Clear: stopping float

clear tells an element not to sit next to floated elements. You may see it in older websites.

.next-section {
    clear: both;
}

Practice

Create a small container example that fits this section.
Check whether the container logically wraps the content and is closed correctly.

08 - Div, section or article?

Use section when the content is a real section with a topic.
Use article when the content can stand alone.
Use div when you only need a general box for styling or layout.

Practice

Create a small container example that fits this section.
Check whether the container logically wraps the content and is closed correctly.

09 - Best practices

Prefer semantic tags when they fit.
Use divs for neutral wrappers.
Keep containers fully nested inside each other.
Use clear class names.

Practice

Create a small container example that fits this section.
Check whether the container logically wraps the content and is closed correctly.

10 - Assignment

Practice

Create a page with header, nav, main, section and footer.
Add one div wrapper where it is useful for styling.
Add an image with float and text next to it.
Replace layout floats with flexbox or grid in the next chapters.

Quiz