One evening, I am working at the dining room table when Aria jumps up onto the table, walks around and eventually finds a small, empty spot to sit.
You really should organise this better.
Everything could do with some rearranging.
It is a bit of a mess at the moment.
But, hey, you’re a cat, what have you got to organise?
Well my litter tray for one.
How can you organise a litter tray?
Wet stuff in one corner, dry stuff in a different corner and a clean runway through the middle.
Fair enough.
You know, there is a way you can organise the HTML elements on each web page so you can arrange them just how you want.
I’m a bit better at that than I am organising this table.
In HTML, there is a tag which helps you organise each page by splitting it in sections.
This tag is the div tag, where div is short for division. You can think of this tag being used to group together your elements so you can arrange them better.
<div> </div>
By adding HTML elements into each of these sections, or divisions, you can move groups of elements around to style your website. Using the div tag you can create columns on your web page rather than each element being below the previous one.
Example Divs Layout With Columns
Think of each division, or div, as a room in a house. Each div contains HTML elements, like each room contains furniture. The layout of rooms in a house sets the structure of the house, just like how the layout of your divs sets the structure of your web page.
Another Example Divs Layout
Because HTML elements are contained within each div, all division elements need to use the opening and closing tags.
And all the code for the HTML elements in the div, go in between the opening and closing tag; is that right?
Exactly!
I’m a genius.
I put it down to being so organised.
Here is an example to illustrate that.
<div>
HTML Tag 1
HTML Tag 2
HTML Tag 3
</div>
Except HTML Tag 1, 2 and 3 would be replaced with actual HTML tags like img for adding pictures and the p tag for adding paragraphs of text.
One example might be to include a heading and a sub-heading inside one div as these are likley to be placed in similar positions and styled similiarly.
<div>
<h1>Aria's Website</h1>
<h3>How to organise a litter tray</h3>
</div>
If you think about it, the body tag is essentially a div element which contains everything.
So how many div elements can you have on one page?
There’s no limit!
But like when you add classes to your elements, it’s better to be clever about what you include in your divs to limit how many you have and how many you have to keep track of.
You may have noticed that lots of websites, including this one, have lists of links along one side with the rest of the content using the rest of the page. This is an example of using divs to separate out HTML elements so you can arrange your web page layout and apply different styling to each div.
Coding For Cats Divs
It may seem like divs have limited use right now, but when we get into styling divs, adding backgrounds and moving elements around your page they will be very useful!
If You're Splitting Your Suitcase Into Divs, Remember To Save One For The Cat.