<div>：內容分區元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<div> HTML 元素是流內容的通用容器。除非以某種方式使用 CSS 進行樣式化（例如直接應用樣式或應用某種佈局模型，如 Flexbox 到其父元素上），否則它對內容或佈局沒有影響。

嘗試一下

作為「純粹」的容器，<div> 元素本身並不具有代表性。相反，它用於將內容分組，以便可以輕鬆地使用 class 或 id 屬性進行樣式化，標記文件的某一部分為使用不同語言編寫（使用 lang 屬性），等等。

屬性

此元素包括全域屬性。

備註： align 屬性已廢棄；請不要再使用。取而代之應該使用 CSS 屬性或技術，例如 CSS Grid 或 CSS Flexbox 來對頁面上的 <div> 元素進行對齊和定位。

使用注意事項

  • 只有在沒有其他語義元素（例如 <article> 或 <nav>）適用時，應使用 <div> 元素。

範例

簡單範例

html
<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

結果

帶樣式的範例

此範例通過使用 CSS 對 <div> 應用樣式來創建一個陰影框。請注意，在 <div> 上使用 class 屬性來將名為 "shadowbox" 的樣式應用於該元素。

HTML

html
<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>

CSS

css
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

結果

無障礙議題

<div> 元素具有隱含的 generic 角色，而不是沒有。這可能會影響某些 ARIA 組合聲明，這些聲明期望具有特定角色的直接後代元素才能正常運作。

技術摘要

內容類型 流內容、捫及內容。
允許的內容 流內容。
或（在 WHATWG HTML 中）：如果父元素是 <dl> 元素：一個或多個 <dt> 元素，後跟一個或多個 <dd> 元素，可選地與 <script> 和 <template> 元素交錯。
標籤省略 不允許，開始和結束標籤都是必須的。
允許的父元素 任何接受流內容的元素。
或（在 WHATWG HTML 中）： <dl> 元素。
隱含的 ARIA 角色 generic
允許的 ARIA 角色 任何
DOM 介面 HTMLDivElement

規範

Specification
HTML Standard
# the-div-element

瀏覽器相容性

BCD tables only load in the browser

參見