#3: Divs, Divs, Divs

Published in

Coding for kids

3 min readJun 27, 2019

In the first two tutorials we learned what HTML elements are, looked at a few examples, and talked about “nesting”. In this tutorial we’re going to look at “sectioning elements”, but before that, say hello to <div>.

Divs, everywhere

The <div> tag is the division element, and it has been around for quite a long time. We use it to divide bits of the page, keeping certain blocks separate from others. Here’s an example:

<div>
   <h1>This is a heading</h1>
   <p>This is a blog post, only a very short one and not a very interesting one, but it’s a blog post all the same.</p>
</div>
<div>
   <h2>This is a shopping list</h2>
   <ul>
      <li>Eggs</li>
      <li>Baked beans</li>
   </ul>
</div>

Here you can see we have two <div> elements. The first one holds a blog post, and the second one holds a shopping list. The <div>s keep them separate.

Later on, when we start to code the way things look, the <div> elements will help us make the difference between the two blocks really clear.

Exercise 1

Follow this link and fork a new copy of the pen. Ignore the CSS window for now, that’s where we put the code that changes how things look. Concentrate on the HTML window. Add another <div> underneath the first two. Nest whatever other elements you want inside–perhaps a paragraph and a heading, perhaps an ordered list (remember that element?) Notice how the new <div> stays separate, like the others.

Sectioning Elements: Like Divs, but Better!

Browsers understand that a <div> is a separate block of something, but a <div> doesn’t really explain any more than that. Nowadays we have elements that describe themselves a bit better. For example, we have:

The <footer> is great for a block at the bottom of another block (or the bottom of the page).
The <nav> element is for navigation. We can put a menu inside this, with links so we can “navigate” around a website.
The <article> element is perfect for holding a news article, or a blog post.

You don’t need to know all the sectioning elements at the moment, but for now there is just one more really important one. One which every web page always has.

The <html> tag goes around everything on the page. All web pages start with an opening<html> and finish with a closing</html>.

Exercise 2

Let’s code a whole web page! Well, not a whole web page, but a big chunk of one. Start a new pen, then in the HTML window add:

An opening and closing <html> tag.
Inside the <html> tags put a <body></body> tag (that’s a new one for you).
Inside the <body> tags put an <article></article> and a <footer></footer>.
Inside the <article> tags put a heading, and a paragraph (write a little blog post if you like).
Inside the <footer> tags put a <nav></nav>.
Inside the <nav> tags put an unordered list–make a list of pages you might find on a website.
Save the pen and give it a title.

Conclusion

Phew! That’s a lot of HTML elements and a lot of nesting you’ve just done! You’ve probably had enough of HTML for now, so in the next tutorial we’re going to start learning about how to make HTML look nicer 💅