語義
在程式設計中，語義指的是一段程式碼的含義——例如“執行那行 JavaScript 會有什麼效果？”或者“那個 HTML 元素有什麼目的或作用？”（而不是“它看起來像什麼？”）
JavaScript 中的語義
在 JavaScript 中，考慮一個函式，它接受一個字串引數，並返回一個以該字串作為 textContent 的 <li> 元素。如果它被呼叫為 build('Peach') 或 createLiWithContent('Peach')，你需要檢視程式碼才能理解該函式做了什麼嗎？
CSS 中的語義
在 CSS 中，考慮使用 li 元素（代表不同型別的水果）來樣式化列表。你會知道 div > ul > li 或 .fruits__item 選擇了 DOM 的哪一部分嗎？
HTML 中的語義
在 HTML 中，例如，h1 元素是一個語義元素，它賦予其所包裹文字“頁面上的頂級標題”的作用（或含義）。
<h1>This is a top level heading</h1>
預設情況下，大多數瀏覽器的使用者代理樣式表會以較大的字型大小樣式化 h1，使其看起來像一個標題（儘管你可以將其樣式化為任何你想要的樣子）。
另一方面，你可以讓任何元素看起來像一個頂級標題。考慮以下內容
<span style="font-size: 32px; margin: 21px 0;">Not a top-level heading!</span>
這會使其看起來像一個頂級標題，但它沒有語義價值，因此不會獲得上述任何額外的好處。因此，為正確的工作使用正確的 HTML 元素是一個好主意。
HTML 應該被編碼以表示將要填充的資料，而不是基於其預設的呈現樣式。呈現（它應該看起來如何）是 CSS 的唯一職責。
編寫語義化標記的一些好處如下
- 搜尋引擎會將其內容視為影響頁面搜尋排名的重要關鍵詞（參見 SEO）
- 螢幕閱讀器可以將其用作路標，幫助視障使用者導航頁面
- 查詢有意義的程式碼塊比在無數帶有或不帶語義或名稱空間類的
div中搜索要容易得多 - 向開發人員提示將要填充的資料型別
- 語義命名與正確的自定義元素/元件命名相呼應
在選擇使用哪種標記時，問自己：“什麼元素最能描述/代表我將要填充的資料？”例如，它是一個數據列表嗎？有序的還是無序的？它是一篇文章，包含章節和相關資訊的側邊欄嗎？它列出了定義嗎？它是一個需要標題的圖或影像嗎？除了全域性網站範圍的頁首和頁尾之外，它還應該有自己的頁首和頁尾嗎？等等。
語義元素
這些是大約 100 個可用的語義元素中的一些
另見
- MDN 上的HTML 元素參考
- MDN 上的使用 HTML 章節和大綱
- 維基百科上計算機科學中語義的含義
- 相關詞彙表術語