第1節。使用HTML5語義標籤結構內容
1.1。結構
- HTML允許我們根據內容的含義構造文檔
- DIV，表標籤用於創建結構，佈局，但不是語義
- html語義標籤 - 網頁的結構要顯示含義，而不僅僅是佈局
- HTML語義結構/分段元素有助於創建頁面更可讀，可訪問，更好的搜索引擎結果，易於修改/更新
- 語義元素清楚地描述了瀏覽器和開發人員的含義
注意：所有現代瀏覽器都支持HTML5語義元素。
HTML標題元素
H1至H6
HTML5語義結構/分段元素
| 標籤 | 使用 |
|---|
<main> | 指定文檔的主要內容 |
<header> | 指定文檔或部分的標題 |
<nav> | 定義導航鏈接 |
<section> | 定義文檔中的部分 |
<article> | 定義一篇文章。 |
<aside> | 除了頁面內容外，定義內容 |
<footer> | 為文檔或部分定義頁腳 |
為什麼引入HTML5語義結構/分段元素？
- 在較早的情況下，開發人員使用/創建了自己的ID/類名稱，用於樣式元素，例如標題，頁腳，頂部NAV，底部NAV，主菜單，NAV-導航，左下方右下底部容器，內容，左文章，左側側欄，右側欄等。
- 這使得搜索引擎很難識別正確的網頁內容，也是瀏覽器的開發人員並編輯內容
- 有了新的HTML5語義/有意義的元素，例如（
<header> <footer> <nav> <section> <article> <aside> ），這將變得更加容易 - HTML5語義/有意義的元素使機器以及具有可訪問性，搜索引擎結果，更一致且更易於使用和样式的用戶更可讀
根據W3C的說法，語義網：“允許在應用程序，企業和社區之間共享和重複使用數據”
實施結構層次結構
只要層次結構有意義，涉及的要素的確代表了您的確取決於您。在創建這樣的結構時，您只需要牢記一些最佳實踐：
- 最好是您
use a single <h1> per page - 這是頂級標題，所有其他標題都位於層次結構中 - 確保在層次結構中以正確順序使用標題。不要使用
<h3>s代表子頭標記，其次是<h2>s代表子提示 - 這是沒有意義的，並且會導致奇怪的結果
為什麼我們需要結構？
- 查看網頁的用戶傾向於迅速掃描以查找相關內容。如果他們在幾秒鐘內看不到任何有用的東西，他們可能會感到沮喪，然後去其他地方。
- 搜索引擎索引您的頁面，將標題內容視為影響頁面搜索排名的重要關鍵字。沒有標題，您的頁面在
SEO (Search Engine Optimization)方面的性能很差 - 視力受損的人通常不會閱讀網頁；他們改為聽他們的聲音。如果沒有標題，他們將被迫聆聽整個文檔大聲朗讀
1.2。大綱
- HTML使用語義元素，標題，語義標籤來生成/描述頁面內容的文檔概述（文檔概述=主題，目錄，索引）
- 設備/瀏覽器使用文檔概述來掃描和搜索內容，導航到特定/特定的部分，以確定內容如何相互關係
- HTML5 Outliner用於理解和了解html頁面/文檔的確切輪廓IE頁面結構
- 使用Outliner實用程序：https：//gsnedders.html1.org/outliner/
- 文本編輯器
Document Outliner Plugin/extension例如括號 - 括號 - >查看菜單 - >顯示文檔輪廓
1.3。導航
- 代表旨在導航的文檔的一部分
- 該元素定義了一組導航鏈接
- HTML元素代表一個頁面的一部分，其目的是在當前文檔或其他文檔中提供導航鏈接
- 導航部分的常見示例是菜單，內容表和索引
注意：這不是文檔的所有鏈接都應在一個內部的規則
元素該元素僅用於主要導航鏈接
1.4。部分
- 代表通用文檔或申請部分
- 這
- HTML
根據W3C的HTML5文檔：“一節是內容的主題分組，通常與標題”
- 通常可以將網頁分為介紹，內容，左右部分的中間部分，等等。
1.5。文章
- 代表文檔的獨立內容，例如博客條目或報紙文章
- 該元素指定獨立的獨立內容
- HTML元素代表文檔中的獨立構圖
- HTML標籤用於博客/論壇帖子，報紙文章，博客條目等。
1.6。旁邊
- 代表一塊與頁面其餘部分相關的內容
- 該元素除了放入內容（例如側邊欄）外定義了一些內容
- Asides經常以側邊欄或呼叫盒形式出現
1.7。標題
- 代表一組入門或導航輔助工具
- 該元素指定文檔或部分的標題
- 該元素應用作入門內容的容器
- HTML元素代表入門內容，通常是一組入門或導航輔助工具
- 它可能包含一些標題元素，但還包含徽標，搜索表格，作者名稱和其他元素
- 您可能有幾個文檔中有幾個元素
1.8。頁尾
- 代表一個部分的頁腳
- 該元素指定文檔或部分的頁腳
- HTML元素代表其最近的分段內容或分段根元素的頁腳
- 頁腳通常包含有關本節的作者，版權數據或鏈接到相關文檔的信息
- 您可能有幾個文檔中有幾個元素
1.9。 div
1.10。 Wai-aria
- Web可訪問性計劃可訪問豐富的Internet應用程序
- 這是一組屬性，可以幫助增強網站或Web應用程序的語義，以幫助輔助技術，例如盲人的屏幕讀取器，可以理解某些事物，而不是HTML本地的某些事物
- ARIA（WAI-ARIA）是您可以添加到HTML元素的一組屬性。這些屬性通過瀏覽器中實現的可訪問性API傳達輔助技術的角色，狀態和財產語義
- ARIA（WAI-ARIA）為用戶提供了一種與您的網站進行導航和交互的好方法。使您的HTML代碼盡可能地語義，以便為訪問者和屏幕閱讀器易於理解代碼
- WAI-ARIA是一項非常強大的技術，它允許開發人員輕鬆描述視覺上豐富的用戶界面的目的，狀態和其他功能
- 具有里程碑意義的角色（屏幕讀取器和其他設備掃描並跳到所需的角色）
- <header role="banner">
- <nav role="navigation">
- <main role="main">
- <article role="article">
- <footer role="footer">
- <aside role="complementary">
- <footer role="contentinfo">
1.11。網站 /博客
- https://www.w3schools.com/html/html_accessibility.asp
- https://www.w3.org/wai/standards-guidelines/aria/
- https://www.w3.org/tr/wai-aria/
- https://developer.paciellogroup.com/blog/2013/02/ususe-wai-aria-landmarks-2013/
