iT邦幫忙

0

【HTML】dl dd dt 清單型的網頁標籤

7514 2021-12-27 12:28:437271 瀏覽
  • 分享至 

  • xImage
  •  

網頁呈現若有內文有「標題+內文的清單」會怎麼排版呢?

可以使用 description list 哦

https://ithelp.ithome.com.tw/upload/images/20211227/20144231CcraXbmZb9.png

你可能像我一樣有試過這幾種方式,多個<ul>搭配<li>或是<div>搭配<span>

<!-- 多個 ul 搭配 li -->
<ul>
    <li>2021.05</li>
    <li>全國冠軍</li>
</ul>

<ul>
    <li>2021.03</li>
    <li>台北市冠軍</li>
</ul>

<ul>
    <li>2021.01</li>
    <li>台北市冠軍</li>
</ul>

<!-- div 搭配 span -->
<div>
    <span>2021.05</span>
    <p>全國冠軍</p>

    <span>2021.03</span>
    <p>台北市冠軍</p>

    <span>2021.01</span>
    <p>台北市冠軍</p>
</div>

不過,MDN 建議不要使用 ul 標籤編排清單,雖然也可以達成效果,但這不是一個好的語法。

dl dt dd 是什麼意思

標籤 定義
dl 清單 description list
dt 項目 description term
dd 描述 description descriptions

瀏覽器預設樣式

大多數的瀏覽器預設 <dd> 呈現文字縮排樣式

dd { 
  display: block;
  margin-left: 40px;
}

使用方式

description list 的架構呈現由普通的交叉排序,到多個項目+單一描述,或是單一項目+多個描述組成的清單都是可以的

<!-- 交叉排序 -->
<dl>
    <dt>項目一</dt>
    <dd>描述一有很多內容說明</dd>
    <dt>項目二</dt>
    <dd>描述二有很多內容說明</dd>
</dl>
<!-- 多個項目+單一描述 -->
<dl>
    <dt>項目一</dt>
    <dt>項目二</dt>
    <dd>只有一個描述也可以哦</dd>
</dl>
<!-- 單一項目+多個描述 -->
<dl>
    <dt>項目一</dt>
    <dd>很多個描述也可以哦</dd>
    <dd>很多個描述也可以哦</dd>
</dl>

更多應用

甚至還可以 <dt> CSS 偽元素加上冒號,用標籤就可以輕易區分出清單的標題、內文的樣式
https://ithelp.ithome.com.tw/upload/images/20211227/20144231mOsYGFg0rc.png

瀏覽器相容性

https://ithelp.ithome.com.tw/upload/images/20211227/20144231LMTak1BNVx.png

參考來源:
https://www.w3schools.com/tags/tag_dl.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#multiple_terms_single_description


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
liuc7722
iT邦新手 4 級 ‧ 2022-09-27 01:41:33

請問為何不建議用ul li?

7514 iT邦新手 5 級 ‧ 2022-11-12 20:31:08 檢舉

對於清單包含項目標題+項目內容,使用 ul li 的語意比較不直覺(只看得出是個 list),而 dt(description term) dd(description descriptions) 的 HTML tag 就可以分辨出項目和敘述。
我想如果只是普通的清單,還是可以使用 ul li 的哦~

Do not use this element (nor elements) to merely create indentation on a page. Although it works, this is a bad practice and obscures the meaning of description lists.

我要留言

立即登入留言