當涉及網站設計時，有意義的元素是具有內在意義的元素，可以有效地向瀏覽器和開發人員傳達該含義。 HTML5 引入了富有表現力的標籤，使您能夠確定網站上元素的用途。例如， 導航 元素定義導航鏈接，而 主要的 元素標識網頁的主要內容（通常稱為“document”）。另一方面， 分割區 element 缺乏內在意義，因此 Div 區塊不被視為有意義的元素。
利用 Webflow，您可以將這些標籤合併到您的網站設計中，以增強其可訪問性和組織性。
透過本教程，您將發現：
- 利用表達標籤的說明
- 使用表達標籤的優點
利用表達標籤的技巧
在 Webflow 中，您可以透過以下方式為您的元素分配各種富有表現力的 HTML5 標籤： 元素設定控制板。對於服務於特定目的並具有固有意義的任何元素（例如頁首、頁尾、導覽等），請謹慎使用表達標籤。
首要建議： 透過適當地使用每個表達元素來實現其預期目的，瀏覽器可以自動化大部分工作，以增強該元素的可訪問性！
Webflow 中可用的富有表現力的 HTML5 標籤包括：
- 標頭 — 為 document 建立標題或通常位於頁面頂部的部分，提供介紹性功能，其中可能包含標題元素、徽標、搜尋表單等。
- 頁尾 — 指定 document 或部分的頁腳，其中可能包含作者資訊、相關頁面的連結等。
- 導航 — 表示 document 中的一組導航連結。經常用於菜單、目錄和索引
- 主要的 — 定義 document 的主要內容。這 主要的 元素不應包含重複的內容，例如導航連結、網站徽標、搜尋表單等。
- 部分 — 界定 document 的一個部分，將具有相似主題的內容分組在一起。 Webflow的 部分 元件配備有 部分 預設 HTML5 標籤。
- 文章 — 描述頁面上的獨立組成，例如論壇貼文、報紙文章或部落格文章
- 在旁邊 - 指定主頁內容以外的內容，例如側邊欄或標註
- 地址 — 指定 document 或文章的作者/所有者的聯絡資訊
- 數位 — 區分獨立內容（例如插圖、圖表、照片、程式碼區塊等）
要將富有表現力的標籤整合到網站上的元素中：
- 選擇 Webflow 畫布上的元素
- 訪問 元素設定面板
- 從下列清單中為所選元素選擇適當的 HTML5 標籤 標籤落下
基本的： 某些元素（例如導覽列）具有預先定義的 HTML5 標籤，以及 H1-H6 元素和清單等元素具有預先指定的語義意義，從而阻止您為它們定義 HTML5 標籤。
表達標籤的優點
富有表現力的標籤專門用於表達目的，不會影響網站的視覺設計。然而，它們為設計師、開發人員和網站訪客提供了許多顯著的好處。
對於設計師和開發人員
富有表現力的 HTML5 標籤將有意義的元素與專門用於設計的元素區分開來，從而增強程式碼的可讀性和可維護性。它們幫助設計人員和開發人員邏輯地建立網站內容和標題層次結構。此外，HTML5 標籤有助於增強網站效能和 SEO，因為與非語義程式碼相比，語義 HTML 通常會產生更小的檔案大小。搜尋引擎優先考慮語義元素中的關鍵字，而不是非語義元素（如 Div 元素）中包含的關鍵字。
為了方便訪問
雖然有視力的使用者可以基於視覺設計直觀地識別各種網頁組件，但視障用戶或網路爬蟲在視覺識別和理解網站組件方面面臨挑戰。透過使用富有表現力的 HTML5 標籤在語義上定義元素，我們向網路爬蟲和輔助技術（例如螢幕閱讀器）通報網站的不同部分，從而促進更準確地向網站訪客呈現和傳達元素。
了解更多：
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日
EN 
ZH 
ZH_CN 
KO 
JA