此篇主要會透過介紹 Text content、Inline text semantics 來理解哪些標籤適合存放文字內容以及哪些標籤不適合，並演示幾個常見比較不好的寫法範例。
MDN-Text content：「Use HTML text content elements to organize blocks or sections of content placed between the opening and closing tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.」
白話文：「使用 text content 元素來組織放在 <body></body> 之間的區塊或內容，這對於 Accessibility、SEO 來說很重要，這些元素確定了該內容的目地或結構。」
常見的元素有下列幾個：<div>、<ul>、<li>、<p>、<hr>、<figure>、<ol>、<dl>，其餘的可以到 MDN 查看。
先說這邊的 Inline text 不等於 Inline elements，只是有些共同的標籤。
MDN-Inline text semantics：「Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.」
白話文：「使用 inline text 語意來定義結構、含義、文字樣式 或 行、任意一段文字。」
常見的元素有下列幾個：<span>、<a>、<br>、<code>、<i>、<b>、<mark>、<small>，其餘的可以到 MDN 查看。
看完上常見元素應該會比較理解上面提到的「結構、含義、行、文字樣式、任意一段文字」分別代表的含義了。
下方舉幾個例子：
br 標籤
code 標籤
i 標籤、b 標籤）簡單來說，屬於 Text content 或 Inline text semantics 兩者元素的標籤，都可以直接設置文字內容，當元素不屬於這兩者時，會建議在符合語意的情況下添加一層 Text content 或 Inline text semantics 元素來包裹住文字內容。
下方介紹兩種常見的錯誤範例。
下方演示常見的錯誤用法：ul > li 列表結構中，使用 p 標籤來包裹文字內容。
<!-- 不建議的寫法 -->
<h2>鐵人賽「意識界歸來的前端」系列</h2>
<ul>
<li><p>圖片取代文字 background、img 差異</p></li>
<li><p>多個 h1 標籤</p></li>
<li><p>3 件關於網站架構、網站閱讀性的小事</p></li>
</ul>
因為 li 標籤本身
屬於 Text content 元素，因此可以直接設置文字內容，不需要再多包一層 p 標籤。
<!-- 建議的寫法 -->
<h2>鐵人賽「意識界歸來的前端」系列</h2>
<ul>
<li>圖片取代文字 background、img 差異</li>
<li>多個 h1 標籤</li>
<li>3 件關於網站架構、網站閱讀性的小事</li>
</ul>
下方演示常見 footer 標籤內直接設置文字內容的範例。
<!-- 不建議的寫法 -->
<footer>
這是一段文字內容。
</footer>
不建議上述的寫法，雖然沒有明確的規範說不行，但下方從其他方面來看到為什麼不建議。
因為 footer 標籤
不屬於Text content 或 Inline text semantics 元素之一，且通常會作為父層容器用來區分不同的內容，因此建議 footer 內可以再透過一個 p 標籤或 span 標籤來將文字內容包裹住。
<!-- 建議的寫法 -->
<footer>
<p>這是一段文字內容。</p>
</footer>
當標籤 不屬於 Text content 或 Inline text semantics 元素之一時，就無法直接在標籤內設置文字內容，解法就是在子層 符合語意 的情況下，添加 Text content 或 Inline text semantics 元素來包裹住文字內容。
iThome鐵人賽
看影片追技術