<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> 元素本身並不具有代表性。相反,它用於將內容分組,以便可以輕鬆地使用 classid 屬性進行樣式化,標記文件的某一部分為使用不同語言編寫(使用 lang 屬性),等等。

屬性

此元素包括全域屬性

備註: align 屬性已廢棄;請不要再使用。取而代之應該使用 CSS 屬性或技術,例如 CSS GridCSS 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

參見