前端語義化

1、什麼是語義化？

語義化是指根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），便於開發者閱讀和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和機器很好的解析。

2、如何理解語義化?

語義化的意圖主要在於能讓人和機器快熟的理解內容或者代碼的含義，用中國的一句俗語來理解就是"見人說人話，見鬼說鬼話"。 例如咱們在頁面尋找一個標題

// 非語義化標籤查找
if（this == '這多是一個內容是標題的標籤'）{
 if(this == '這個標籤裏面是標題') {
  console.log('找到了')
 }
}
// 語義化
if（this == '這是一個標題標籤'）{
 console.log('找到了')
}

3、有哪些語義化標籤?

標籤	含義
<header>	用於規定文檔或節的頁眉
<nav>	定義導航連接
<main>	規定文檔的主內容
<footer>	定義文檔或節的頁腳
<section>	定義文檔中的節
<article>	定義文章
<aside>	定義頁面內容之外的內容
<details>	定義用戶可以查看或隱藏的額外細節
<summary>	定義 <details> 元素的可見標題
<figcaption>	定義 <figure> 元素的標題
<time>	定義日期/時間
<figure>	規定自包含內容，好比圖示、圖表、照片、代碼清單等
<mark>	定義重要的或強調的文本

4、語義化有什麼優勢？

優勢：

1. 標籤語義化有助於構架良好的HTML結構，有利於搜索引擎的創建索引、抓取。簡單來講，試想在H1標籤中匹配到的關鍵詞和在div中匹配到的關鍵詞搜索引擎會吧那個結果放在前面。
2. 有利於不一樣設備的解析（屏幕閱讀器，盲人閱讀器等）盡是div的頁面這些設備如何區分那些是主要內容優先閱讀
3. 有利於構建清晰的結構，有利於團隊的開發、維護