靈魂三問：
- 標籤語義化是什麼？
- 爲什麼要標籤語義化？
- 標籤語義化使用場景有哪些？
下面讓我們跟着這三個問題來展開一下本文的內容。
一、標籤語義化是什麼？
標籤語義化就是讓元素標籤做適當的事情。例如 p 標籤就是代表文本，button 標籤代表按鈕，nav 標籤代表導航等等。
二、爲什麼要標籤語義化？
其實標籤語義化是給瀏覽器和搜索引擎看的。沒有人關心你寫的 HTML 代碼有沒有正確的使用語義化，只有它們關心這件事情，是不是很暖心？
爲什麼瀏覽器關心？
DOM 的大部分內容具有隱式語義含義。 也就是說，DOM 採用的原生 HTML 元素能夠被瀏覽器識別，並且可以預測其在各類平臺上的工作方式。
例如用 div 實現的按鈕和用原生 button 實現的按鈕就有一些區別，在表單內 button 可以不用綁定 onclick 事件就可以提交表單內容，用 div 實現的按鈕則不行。另外在瀏覽器中按 tab 鍵盤可以在 button 之間來回切換，而 div 則不可以。
還有 input 標籤 type 屬性，由於值的不同在手機上的表現也不同。例如 type=“tel” 和 type=“number” 彈出來的數字鍵盤是不一樣的。
爲什麼搜索引擎關心？
搜索引擎的爬蟲根據標籤來確定上下文、關鍵字的權重，有利於 SEO。
如果你覺得以上兩點理由都不能打動你，從而正確的使用語義化，沒有關係，使用 div 一把梭也是可以的。
三、標籤語義化使用場景有哪些？
上面是一個比較常見的整體佈局方式，其他佈局類型其實都是萬變不離其宗，逃不出這個使用框架（文末附上 HTML 源碼）。
除了整體佈局外，我們還要更細節一點，關注其他標籤的使用方式。例如：
a標籤用於跳轉。h1-h5用於標題bstrong用於強調ulli用於列表
…
這只是其中的一部分標籤使用方式，更多的還得參考文檔。
方便自己，方便他人，請正確使用語義化。
參考資料
文中 DEMO 源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
<style>
html, body {
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
height: calc(100% - 120px);
border: 1px solid blue;
}
header, footer {
height: 60px;;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
}
header {
justify-content: flex-end;
}
ul {
display: flex;
align-items: center;
justify-content: space-around;
}
li {
list-style: none;
border: 1px solid orange;
height: 60px;
line-height: 60px;
width: 100px;
text-align: center;
}
main {
display: flex;
align-items: center;
justify-content: center;
}
aside {
width: 20%;
border: 1px solid #000;
height: 100%;
}
.right {
width: 80%;
height: 100%;
}
section {
height: 200px;
border: 1px solid green;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</header>
<main>
<aside>
<p>這是一個側邊欄 aside</p>
</aside>
<div class="right">
<section>
<p>p1</p>
<p>p2</p>
</section>
<section>
<p>p3</p>
<p>p4</p>
</section>
</div>
</main>
<footer>
</footer>
</body>
</html>