Lesson 3: Code structure using <div>

Getting Started

3 min readJan 4, 2015

This lesson will focus less on content, and more on structure. In my rush to learn coding, I breezed past structure. I wanted to learn how to make content as quickly as possible. In the end, my code became messy and unreadable. I would look at something I wrote days later and not be sure what I was trying to do. Eventually, I had to take time out and learn structure from scratch. You can avoid that, by taking the time to learn basic structure now.

This will be a short lesson, focused only on using a <div> take, to create logical dividers to your code. Within these tags, we will introduce two new attributes called “class” and “id”. These will help us create a solid structure to our code which will help with everything we do. Including the next lesson, which will be adding more style to our web pages. Classes and Ids can be used as attributes within any tag, as we will illustrate below.

Let’s open up our text editor, and begin today’s lesson.

<div> tags

Start out with our basic HTML.

<html> 
  <head>
    <title>Lesson 3</title>
  </head>
  <body>  </body>
</html>

A div has two functions. On the browser, it makes sure everything within the div is separated from everything else. It will appear as a block that covers the length of the page from right to left. This can be adjusted, but we won’t get into that for a few more lessons.

The second function, is to better describe our code. Your code should not just tell the browser what to do, it should tell anyone else reading your code what you’re trying to do. I once heard that reading good code should be like reading a good book. Each line should flow meaningfully into the next.

Below, I’m going to add some simple content, similar to yesterday’s content. This time, I’ll separate the content with divs to give us a more logical structure. I will add <div>s to logically structure our code into different sections.

...
  <body>
    <div>
      <h1>Lesson 3!</h1>
      <p>Today I'm learning about div elements</p>
    </div>
    <div>
      <p>Todo list</p>
      <ul>
        <li>Clean the dishes</li>
        <li>Walk the dog</li>
        <li>Watch a movie</li>
        <li><a href="http://www.medium.com">Read Medium</a></li>
      </ul>
    </div>
   <body>
...

In this HTML, I decided to separate the header and paragraph from the list using <div>s. You can add divs anywhere you like. Once you see and work with more code, you’ll start to understand where and why to use them. For now, it’s enough to know that they are just ways to create structure.

New Attributes: class and id

In lesson 2, we learned about an attribute named href that can be used with <a> tags. Now we’re going to learn about class and id. These attributes can be added inside of any tag. Let’s add some to our code from above.

<html>
  <head>
    <title>Lesson 3</title> 
  </head>
  <body>
    <div class="main-section">
     <h1>Lesson 3!</h1>
     <p>Today I'm learning about div elements</p>
    </div>
    <div class="list-section">
      <p>Todo list</p> 
      <ul id="todo-list">
        <li>Clean the dishes</li>
        <li>Walk the dog</li>
        <li>Watch a movie</li>
      </ul>
    </div>
  <body>
</html>

If you look closely at the code above, you can see that the attributes are embedded within tags. We gave the first div a class called “main-section”, the second div a class called “list-section”, and the unordered list an id called “movie-list”. Note that it’s common practice to use a dash ‘-’ when you have multiple words in an attribute. Don’t leave blank spaces.

If you open the file in the browser, you’ll notice that nothing changed. Not yet, at least. In lesson 4, we’ll learn how to use these ids and classes to give our page more style than the plain page we see in front of us now.

There is only one difference between class and id, but it’s a very important one. If we had more lists, we could add more divs around each list, and give the divs a class called “list-section”. We can use the same name for a class multiple times. With ids, however, we can only use the same id once. We can never have an id=”todo-list” on this same file.

Summary

In this lesson, we learned how to add structure to our HTML using <div> tags and class and id attributes. It didn’t make a difference on the browser now, but in our next lesson, we’ll see why it’s so useful.

We also discussed the importance of structure. Hopefully learning proper structure is something you take to heart. Since I struggled with it so much, I will make sure to use and explain proper structure step-by-step.

Lesson 3: Code structure using <div>

Getting Started

<div> tags

New Attributes: class and id

Summary

Written by Andrew Gimma