span與div

在HTML中，span與div元素被用來表達一個邏輯區塊。div在Dreamweaver也叫「層」，用於標示塊級元素，而span標示行內元素。

絕大多數HTML元素具有語義上的意義 - 也就是說，這個元素表示了它的作用。例如，一個p元素應該包含一段文本，而一個h1元素應該包含頁面的最高層級標題，可據此區分它們。但span和div沒有天生的語義含義，它們可以被用於指定特定的區塊或行列。

div就像一個段落，在視覺上於頁面隔離出了文檔的一部分，它可以包含段落、標題、表格等。span元素的作用是選擇特定文本，以便於指定特殊樣式。這些特性由層疊樣式表（CSS）控制。

實際使用

span和div

當它們被標記為具有class或id屬性時，span和div元素可以表示通過HTML無法描述的信息的類型。例如，<div id="byline">Fred Smith</div>可能被用於指示一個文檔中作者的名稱，而<span class="date">10th Feb 2010</span>可能被用於具體指示一個日期。

有三個主要的理由使用具有class或id屬性的span或div標籤：

用CSS指定樣式

也許span和div元素的最常見用法就是用以攜帶class或id屬性，結合CSS以應用布局，排版，顏色和其它表現性的屬性於部分內容。CSS不只是應用於視覺上的樣式：當由語音瀏覽器（英語：voice browser）說出時，CSS樣式可以影響語速，重音，豐富度甚至於立體聲。

任何HTML內的元素的屬性，應該描述它們語義上的目的，而不僅僅是它們在某個特定介質中所想要的表現屬性。例如，<span class="red small">password too short</span>在語義上毫無意義，然而<span class="warning">password too short</span>會有用的多。^[1]通過對CSS的正確使用，「warnings」可能被渲染為一個紅色，小字體，但當被打印出時，它們可能被省略，因為此時對它們做任何事情都為時已晚。也許被說出時它們可以被給與額外的重音，而且在語速上有一個較小的減少。第二個例子是語義化的標記，而不僅是表現上的，但當結合CSS時滿足了這兩種目的。

語義清晰度

這種對部分頁面內容進行的分組和標籤被引進可能僅僅為了使頁面語義上更有意義。

萬維網聯盟（W3C）已在運行一個主要的語義網項目，旨在使整個web對今天和未來的信息系統越來越有用。

在頁面設計過程中，設計者對內容中每一個元素和子元素的確切目的和意義，有一個清晰的想法。如果表達該含義的標準的HTML元素存在，它們就應該被使用。如果沒有，就封裝一個恰當class或id，span或div。至少，這樣做將幫助未來的編輯者維護這個標記。

微格式運動是建立於語義化class的想法之上的一次嘗試。例如，微格式敏感軟件可能會自動發現如<span class="tel">123-456-7890</span>的元素且允許對該電話號碼的自動撥號。

對代碼的訪問

一旦HTML或者XHTML的標記被送達網頁訪問者的客戶端瀏覽器，就會有客戶端代碼將需要導航於網頁的內部結構（或者文檔對象模型）的機會。最常見的原因是頁面隨着產生動態行為的JavaScript。例如，如果把鼠標移至"Buy now"的超鏈接上，它就意味價格，JavaScript代碼可以做到這個，但無論它在標記中的哪裡，JavaScript需要標識價格元素。如下的標記將足夠：<div id="price">$45.99</div>。

另一個例子是Ajax編程技術，其中，例如，點擊一個超鏈接也許會引發JavaScript代碼檢索文本尋找新的報價，以代替頁面中現有的那個，而不用重新加載整個網頁。當新的文本從服務器端返回，JavaScript必須標識頁面上的準確的區域，用新的信息代替。

不那麼常見，但作為改進對網頁的訪問，以及必須使用span與div元素的class或id屬性以在頁面內導航的代碼的重要例子包括自動測試工具的使用。在動態產生HTML（Dynamic web page）上，這也許包括自動頁面測試工具如HttpUnit（英語：HttpUnit），xUnit（英語：XUnit）家族成員之一，的使用，以及應用於表單驅動的網站時的負載或壓力測試工具如Apache JMeter（英語：Apache JMeter）。

濫用

明智的使用div和span是HTML和XHTML標記中的一個重要部分。

例如，當結構上和語義上一系列項目需要一個外部的包圍元素，和進一步為每一個項目提供的容器時，則在HTML中有多種多樣可用的列表結構，其中之一可能比一個自製的div和span元素的混合更加可取。^[2]

示例：

【優】

<ul class="menu">
  <li>Main page</li>
  <li>Contents</li>
  <li>Help</li>
</ul>

【劣】

<div class="menu">
  <span>Main page</span>
  <span>Contents</span>
  <span>Help</span>
</div>

參考資料

^ Harold, Elliotte Rusty. Refactoring HTML. Addison Wesley. 2008: 133. ISBN 0-321-50363-5. HTML does not have individual elements representing these uses. Instead they should be indicated by a span or div element whose class attribute indicates the reason for formatting the text as italic: [example ...] <span class="species">...
^ Harold, Elliotte Rusty. Refactoring HTML. Addison Wesley. 2008: 184. ISBN 0-321-50363-5. There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs, divs, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just use ul, ol, or dl instead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...]

[1] Harold, Elliotte Rusty. Refactoring HTML. Addison Wesley. 2008: 133. ISBN 0-321-50363-5. HTML does not have individual elements representing these uses. Instead they should be indicated by a span or div element whose class attribute indicates the reason for formatting the text as italic: [example ...] <span class="species">...

[2] Harold, Elliotte Rusty. Refactoring HTML. Addison Wesley. 2008: 184. ISBN 0-321-50363-5. There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs, divs, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just use ul, ol, or dl instead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...]

[1]

[2]