<div> & <span>
Imagine that you are moving into a new house and need to pack your belongings. You get some moving boxes and start packing things in the living room placing each item in a box. Fragile items you surround in bubble wrap before placing them in the box. After everything is packed, you seal the box up and write “living room” on it. Next, you move to the kitchen packing the items into a different box, sealing it up, and writing “kitchen” on the box.
The box in our analogy above is a container that is used to hold things. That is exactly what the <div> and <span> tags are: containers (boxes) that group other HTML elements and tags together. The difference between <div> and <span> is that div is a block level element while span is an in-line level element. So, more appropriately, the boxes from our analogy are more like <div> tags while the bubble used for the fragile items would be more like <span> tags. Can we put <div> and <span> tags inside other <div> and <span> tags? Can we put boxes inside of boxes? Yep, we sure can.
Classes and Id’s
Going back to our moving analogy, we wrote “living room” on the box that contained all the items in the living room and “kitchen” on the box with items that go in the kitchen. If the box is our <div>, then the group of items that belonged in each room would be the class. We would have a “living room” class and a “kitchen” class.
Looking at it another way, think of a school classroom. The class is made up of several students. Let’s say the subject the class was studying was “HTML 101”. We could write class=”html101″ and it would be made up of every student in that classroom. The students in this classroom all have their own student ID’s. The ID’s are unique to each particular student. Likewise, each HTML tag can also have it’s own id. If one of the students in the class was John Smith, we could write something like this:
<div class=”html101″ id=”johnsmith”></div>
We can we have an id attribute without a class attribute. That is exactly what we did when we made our login form.
Putting It All Together
Tags & Attributes To Remember