What's the difference between "dart:html" and "dart:dom" package?

Answering a bit out of order

1. Which one should I use: you should use dart:html it provides the cleanest abstraction on top of the DOM.

2. why cant I use both: it should strictly not be needed, but you can actually get to the underlying dart:dom implementations from dart:html using a dirty hack described here. The better and more clean solution is to use Dart's ability to rename imports i.e. #import('dart:dom', prefix: 'dom'); as described by @munificent below.

3. whats the different between dart:html and dart:dom package. I tend to think of the difference between them as similar to JQuery (dart:html) vs JS DOM manipulation (dart:dom).

The Dart team is trying hard to make the dart:html API as easy and unsurprising (in the good way) to use as we have gotten used to from libraries such as JQuery (dom manipulation), Tree.js (WebGL programming) and D3 (SVG drawing). Further they also try to follow one API style across all these areas of functionality so that the SVG or WebGL API use similar constructs as the DOM API, thus ensuring that all the parts play nicely together.

Update: as of may 2012 dart:dom is now deprecated and will be removed.

Lars did an excellent job with your question. I'll just add to:

why cant I use both

You can, actually. The problem is that both libraries use the same names for a few things (mainly window). When you import both of them, those names collide, which Dart doesn't allow. To resolve that, you can import one of them with a prefix:

#import('dart:html');#import('dart:dom', prefix: 'dom');

Then, when you refer to a name imported from dart:html, you just use the name. When you want a DOM one, you prefix it:

window     // dart:html windowdom.window // dart:dom window

An update to all the answers, and probably makes this question no longer applicable is that dart:dom has been deprecated.

See this post on dartlang website.