網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責建立。標籤，也就是那些出現在尖括號裡的單詞，對網頁內容的語義含義做出了描述，但這些標籤不包含任何關於如何顯示有關內容的資訊。例如，P 標籤表達了這樣一種語義：“這是一個文字段。”

網頁的表示層（presentation layer） 由 CSS 負責建立。 CSS 對“如何顯示有關內容”的問題做出了回答。

網頁的行為層（behavior layer）負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。

網頁的表示層和行為層總是存在的，即使我們未明確地給出任何具體的指令也是如此。此時， Web 瀏覽器將把它的預設樣式和預設事件處理函式施加在網頁的結構層上。例如，瀏覽器會在呈現“文字段”元素時留出頁邊距，有些瀏覽器會在使用者把滑鼠指標懸停在 某個元素的上方時彈出一個顯示著該元素的 title 屬性值的提示框，等等。

分離

在所有的產品設計活動中，選擇最適用的工具去解決問題是最基本的原則。具體到網頁設計工作，這意味著：

使用 (X)HTML 去搭建文件的結構。
使用 CSS 去設定文件的呈現效果。
使用 DOM 指令碼去實現文件的行為。

不過，在這三種技術之間存在著一些潛在的重疊區域，如：DOM 技術可以用來改變網頁的結構。在 CSS 身上也可以找到這種技術相互重疊的例子。諸如 :hover 和 :focus 之類的預定義符號（偽 class 屬性） 使我們可以根據使用者觸發事件來改變呈現效果。改變元素的呈現效果當然是表示層的“勢力範圍”，但對使用者觸發事件做出反應卻是行為層的領地。表示層和行為層 的這種重疊形成了一個灰色地帶。

偽 class 屬性是 CSS 正在深入 DOM 領地證據，但 DOM 在這方面也不是毫無作為。我們完全可以利用 DOM 技術把樣式資訊施加在 HTML 元素身上。

分離的效果要做到即使去掉表示層和行為層，文件的內容也依然可以訪問，因為“內容才是一切”。而且網頁的行為層 (javascript) 與其結構 (XHTML) 是彼此互不干擾的，不能混雜在一起。還要給行為層“預留退路”，要考慮到如果你的使用者禁用了 Javascript 會怎樣？是不可網頁還可以正常運作。

總之，這三種技術就像是一個凳子的三條腿，要想成為一名技能全面的 Web 技術師，就必須熟練掌握這三種技術，並知道每種技術最適用於哪一類問題。