如何使用無語化標籤 div、span

2022 iThome 鐵人賽

DAY 15

Modern Web

意識界歸來的前端系列第 15 篇

14th鐵人賽

Kent

2022-09-30 23:55:47

1133 瀏覽

分享至

此篇會介紹無語意標籤的特性以及 div、span 兩者差異。

span 標籤

MDN-span：「The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate.」
白話文：「通用的 inline 容器元素（用來包裹行內元素），其本身沒有任何意義，於為了設置樣式將元素進行分組（使用 class 或 id 屬性），或者為了共享 Global attributes。只有在沒有其他合適的語意標籤時才使用 span 標籤。」

如果不曉得如何判斷有沒有其他合適的語意標籤，可以參考前面這篇文章「如何設置語意化標籤？」。

Tips

無語意行內元素，用於包裹 Phrasing content 元素、文字內容的容器。
父層元素為 Phrasing content、Flow content 元素。
常透過屬性 class、id 來 設置樣式 或 JS 操作。

下方演示如何透過 span 來對文字設置樣式以及 JS 操作。

<!-- 對文字內容設置樣式 -->
<p>這是一段包含 <span class="text-sky-50">藍色文字</span> 的段落範例</p>

<!-- 設置 id 為了 JS 操作 -->
<p>這是一段為了將 <span id="uppercase">example</span> 英文轉為大寫的範例</p>

<!-- 透過 JS 將英文轉為大寫 -->
const uppercase = document.querySelector("#uppercase");
uppercase.style.textTransform = "uppercase";

div 標籤

MDN-div：「The div HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).」
白話文：「屬於 flow content 的通用容器，在使用 CSS 設置樣式之前，它對內容或佈局沒有影響（例如：設置文字樣式，或是排版用的樣式 flex 等，皆會作為樣式的父層元素）。」

MDN：「As a "pure" container, the div element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.」
白話文：「本身並不代表任何東西。用於對內容（子元素）進行分組，以利於透過 class、id 來設置樣式。」

Tips

無語意區塊元素，用於包裹 Flow content 元素的容器。
父層元素為 Flow content。
常透過屬性 class、id 來 設置樣式 或 JS 操作。

<!-- 設置 flex 排版 -->
<div class="flex flex-col">
    <span>上面文字</span>
    <span>下面文字</span>    
</div>

兩者比較

共通性

都是無語意標籤（generic container）
都建議在沒有其他合適的語意標籤時才使用。（如果不曉得如何判斷是否合適的語意標籤，可以參考前面這篇文章如何設置語意化標籤？）

差異性

div 作為容器元素用於包裹比較大比較複雜的內容結構，以及常用於佈局樣式（例如：flex）。
span 比較常用於結構比較小的內容，例如：較短的文字內容樣式、需要並排的文字樣式。

巢狀包裹

div 中可以包裹 span（span 屬於 flow content）
span 無法包裹 div（div 不屬於 phrasing content）。

結構大小

如果是非文字樣式（例如：畫形狀）或比較大的結構都比較適合 div。
如果是比較小的結構，例如：修改內容其中一部分文字樣式，那就比較適合 span。

<!-- div 設置圓形 -->
<div class="h-[30px] w-[30px] rounded-full bg-sky-200"></div>

<!-- div 比較大的結構以及設置共通樣式 -->
<div class="text-center bg-sky-50 text-yellow-200">
      <h2 class="logo">代表標題</h2>
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Serices</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
</div>

<!-- div 包裹 span 以及透過 div 設置通用樣式，span 修改 -->
<div class="text-center text-sky-200">
    <span>這是第一段文字</span>
    <span>這是第二段文字</span>
    <span class="text-red-200">這是第三段文字比較重要，要修改文字顏色</span>
</div>

div、ul > li 列表結構

列表結構優勢

可以將重複性質的內容改用 ul > li 列表結構來增加語意化。
能讓使用閱讀器的視障者暸解該區塊為列表，及透過閱讀器能夠讀出有多少 li 項目，並取指定 li 項目來讀出內容，有效提升用戶體驗。

下方演示 div、ul > li 的差異

<!-- 不推薦寫法 -->
<div class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Serices</a>
    <a href="#">Contact</a>
</div>

<!-- 推薦寫法 -->
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Serices</a></li>
    <li><a href="#">Contact</a></li>
</ul>

conclusion

雖然兩者都可以設置文字樣式，但 div 比較偏向在父層設置內容通用的文字樣式，而 span 比較適合針對特定對象來設置樣式。

例如：div 設置容器內子元素的通用樣式，當子層種有一個特別的樣式，則就很適合使用 span 來單獨修改）。

<div class="text-center text-sky-200">
    <span>這是第一段文字</span>
    <span>這是第二段文字</span>
    <span class="text-red-200">這是第三段文字比較重要，要修改文字顏色</span>
</div>