HTML & CSS: Semantic Structure & The Box Model

How Do We Mark Structure?

We've written text, structured it, and styled it

Now, we want to give structure to the page itself

The <div>

<span> but for things other than text

Anything can go into a div

Think of it like "a box"

Usage of <div> from MDN

The <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

The problem of <div>

It's just a box. It doesn't mean anything inherently

When you check in MDN, the "Implicit ARIA role" is "No corresponding role"

Why do we need a more specific item?

From "Information Architecture"

Every page should answer:

What's the content?

<main> is for the main area of the page, where content would be unique per page

<article> is for "if it could stand on its own as a page"

<section> is for subdividing articles or main sections

I suggest using headings in all of these

What's related to this content?

<aside> is for additional content

If an <aside> is inside an <article> or <main>, it's understood that it's directly related to the content of the page

If an <aside> is outside an <article> or <main>, it's more related to the site itself than the individual page

Where are we? How did we get here?

<nav> is for navigation. Can be used anwhere.

<header> is for "banner" content like logos

<footer> is for lesser content info

Marking Up Images Further

The <img> tag is fine on its own

But if you want to have content that's related to that image, we can group it together with <figure>

To add a caption, inside a <figure>, we add a <figcaption> element

<figure>
<img src="/img/image.jpg" alt="Alternative Text" width="100" height="100">
<figcaption>A caption to the image</figcaption>
</figure>

Content is Sectioned, But Now What?

We used main, header, footer, section, and nav

But it didn't really change how the page looked

We've done text styling, but that doesn't do layout

The Box Model

I'm introducing this early because it's the core concept in CSS

How does CSS render a box?

NOTE: There are ways to override this but let's start with the basics

Padding, Border, and Margin

Padding is the distance from the content to the inner edge of the container

Border is the distance from the inner edge of the container to the outer edge of the container

Padding and Border add to the width of the element, so a 100px element with a 10px padding and 2px border on both sides is 124px wide in CSS

Margin is the distance from the outer edge of the container to the next container

Visual Example

 
A purple div with 10px padding around it (yellow), 5px border (black), and 10px margin (blue)

The challenge with this is that there is no haslayout set, so it "collapses" the div

Visual Example: Overflow Set

 
A purple div with 10px padding around it (yellow), 5px border (black), and 10px margin (blue)

We can set haslayout by saying overflow:hidden; in the CSS

The CSS Code: margin and padding

Margin and padding are coded the same.

You need units! Any unit works - typically I like to use em or rem to make things even, but px works as well

element { margin: top right bottom left }
element { padding: top right bottom left }

The CSS Code: border

Border can be more complicated, but we'll stick with the basics: a solid border even all the way around

Width takes any unit - unlike other times, I tend to use pixels here, but fractions of em/rem work fine.

Color takes any color unit.

Type takes any of solid, inset, outset, dashed, double

element { border: type width color }

Putting Things Next To Each Other

The example above is … fine. But what if you need to put things next to each other

We're going to use the css property float to "float" things next to each other

float: left; clear:none

 
 
Two purple divs next to each other with 10px padding around it (yellow), 5px border (black), and 10px margin (blue)

Because we floated them, the width shrunk because it's only the content of the div, not the whole width of the container

Floating with Typical Content: No float

An example illustraion of a neon-colored polaroidThis is content that I'm just typing to fill some space and I could just go on and on kind of like my lectures and hopefully you get something out of it nullum ad quisquis nonsense ut allium onion garlic, how many lines can i fit here? I'm just gonna repeat. This is content that I'm just typing to fill some space and I could just go on and on kind of like my lectures and hopefully you get something out of it nullum ad quisquis nonsense ut allium onion garlic

An example of an image with content next to it without float

Floating with Typical Content: With float

An example illustraion of a neon-colored polaroidThis is content that I'm just typing to fill some space and I could just go on and on kind of like my lectures and hopefully you get something out of it nullum ad quisquis nonsense ut allium onion garlic, how many lines can i fit here? I'm just gonna repeat. This is content that I'm just typing to fill some space and I could just go on and on kind of like my lectures and hopefully you get something out of it nullum ad quisquis nonsense ut allium onion garlic

An example of an image with content next to it WITH float

element { float:left; clear:none; }

So What's "Clear"

clear means that "nothing can be to this side"

clear: none means that content can wrap around to the right or left

clear: left means that content will only wrap around the right

Typically, you clear the side you want to float the element towards - e.g. float:left; clear:left; - so that there's no question about what is over there

However, it's a decision to make, especially when putting things together -- do you need to clear what's on the left? Will you have multiple items floated left in order?