splits the contense of the parent-tag in individual blocks by creating so-called boxes (an individual unit). joins the contense of the children-tags into on block *without* creating a box.
+++
Practically both are used to specify a "class" that refers to a stylesheet (cascading style sheet = CSS), that defines how the tags/text *inside* them should look.
Parts of the text (inside one pair of ) should look like a sidebar, another part as a menu, and another part as copyright-notice. This is done by defining in the style(sheet) that inside one class, other tags (<a>,...) should behave, look and be placed in one way... while they should behave, look and behave in a different manner inside another class. This way we can make menues, menu-lines, sidebars and anything else we'd like. and just define the scope and which class to use. make a new "box", while doesn't. If you had a paragraph () and wanted to make one sentence red; using would split the paragrap in three. One block (box) with the default text-color... one block with one sentence in red... and one block with the rest in default color. If you on the other hand used , the paragraph would not be broken up.
Here splits the paragraph in several parts, while *joins* the words in one sentance into one unit.
So you use to split-up your HTML-document in *individual* parts, and if you need to change parts of *one tag* without "splitting" it.
+++
When you write the HTML, think about how it will appear without using stylesheets at all. Some people don't use stylesheets, some people prefer text-only browsers and others must use text-only (eg. blind people). So don't hide the *actual content* at the end of the HTML-document; after miles of menus, slogans and unrelated sidebars.
With stylesheets, what is in a block () at the end of the HTML-document, can easely be moved to the top when the page is rendered and displayed. So put something like [short menu-bar][content][full menu][heading with slogan][sidebar ads][copyright] in the HTML-document, even though the slogan will be placed on top due to the stylesheet when the page is rendered.
+++
www.w3.org sets the standards, so they have the documents describing the whole language. You want to look on HTML, XHTML (under Markup) and CSS (under Style or Stylesheet). Great resource, but somewhat technical.
www.w3schools.com has great tutorials and inforamtion about all aspects of web-design.