What is the main difference between: <div> <div class=> <div id=>

Think of "id" like your name and "class" like your species (human). If we know you are human, we can assume a lot of things about how you look. If we know your name, we can pick you out of a group of humans.

So a div's class will help us know what it looks like - its fonts, colors, etc. Establishing it's id will allow us to reference it in other places.

I hope that was a decent non-technical answer.

class and id are html attributes and we can give values to them like this:

<div id="social-navigation" class="blue-background"> 

The id and the class values are selected by your CSS stylesheet so they do a similar thing. These attributes help organize our styles so that we are not repeating our code so much. A big difference would be that you can give an HTML element multiple class values by separating them with a space. You cannot give the id attribute multiple values

<style>

#social-navigation li {
  padding: 0;
  border: 1px solid black;
}

#main-menu li {
 padding: 20px;
 border-left: 1px solid white;
}

.blue-background {
  background-color: blue;
}

</style>

<div id="social-navigation" class="grid_5 blue-background">

  <ul>
   <li>Facebook Link</li>
   <li>Twitter Link</li>
   <li>Instagram Link</li>
  </ul>

</div>

<div id="main-menu" class="grid_10 blue-background"> 

  <ul>
   <li>Home</li>
   <li>About</li>
   <li>Contact</li>
  </ul>

</div>

<!-- Check out how I used blue-background class value twice  -->

<!-- Above I have two menus and on my website I like all my menus to have a blue background a common style throughout my site -->

<!-- Although I have two menus, I want to style them uniquely, so I use a ID's for those unique styles. -->

The short of it:

< DIV > Divides or groups content in your HTML

< DIV CLASS="..." > Allows you to name your DIV. You can make the name anything you want.

Example: < div class="treehouse" >

You can also give multiple DIV's the same class name which will group them together when you use the the class name in your CSS by using "." followed by the class name

Example: .treehouse { background-color: tomato; }"

< DIV ID="..." > Allows you to name a DIV similar to the Class. The difference with using ID is that you can only use it for one DIV and you have to use the "#" symbol when selecting this ID in your CSS. (using ID 's also have higher specificity)

Example:

"#treehouse { background-color: black; }"

The long of it: http://www.w3schools.com/css/css_id_class.asp