.DIV & C.R.A.P.

DIV is an element that identifies the part of a document.  We put a DIV element so that we can set the alignments.  This element is a grouping element.  The div is a generic block-level element. It doesn’t convey any meaning about its contents (unlike a p element that signifies a paragraph, or an h1 or h2 element that would indicate a level 1 or level 2 heading, respectively); as such, it’s easy to customize it to your needs. The div element is currently the most common method for identifying the structural sections of a document and for laying out a web page using CSS.  Some developers perceive similarities between the p and the div elements, seeing them as being interchangeable, but this isn’t the case. The p element offers more semantic information (“this is a paragraph of text, a small collection of thoughts that are grouped together; the next paragraph outlines some different thoughts”), while the div element can be used to group almost any elements together. Indeed, it can contain almost any other element, unlike p, which can only contain inline elements.  The div is an “anything-goes” element—it can contain any inline or block-level elements you choose, so it has no typical content.

All design starts from four basic principles, abbreviated as CRAP (they come in no particular order, so the more squeamish can rearrange them to form “CARP”, if you like. I’d advice against “PCRA”, though…). These are Contrast, Repetition, Alignment, and Proximity.

• Contrast
  Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative.
• Repetition
  Repeat styles down the page for a cohesive feel — if you style related elements the same way in one area, continue that trend for other areas for consistency.
• Alignment
  Every thing on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements.
• Proximity
  Proximity creates related meaning: elements that are related should be grouped together; whereas separate design elements should have enough space in between to communicate they are different.