語義化標籤
“語義化”指的是機器在需要更少的人類干預的情況下能夠研究和收集信息，讓網頁能夠被機器理解，最終讓人類受益。
HTML 標籤語義化是讓大家直觀的認識標籤和屬性的用途和作用，很明顯<hx>看起來很像標題，因爲擁有粗體和較大的字號。<strong>，<em>用來區別於其他文字，起到了強調的作用。
HTML標籤語義化的設計思維其實就是給某塊內容用上一個最恰當最合適的標籤，這樣一來，不管是誰都能看懂這塊內容是什麼。
例如:
<main>標籤：表示文檔中的主要內容。<main> 元素中的內容對於文檔來說應當是唯一的。它不應包含在文檔中重複出現的內容，比如側欄、導航欄、版權信息、站點標誌或搜索表單。
查看下面這兩段html和css代碼，體會下里面的許多語義化的標籤吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<title>語義化標籤</title>
</head>
<body>
<!--頁眉-->
<header>
<!-- 導航 -->
<nav><ul><li><a href="#">鏈接1</a></li><li><a href="#">鏈接2</a></li><li><a href="#">鏈接3</a></li></ul></nav>
</header>
<!-- 主體 -->
<main>
<!-- 文章 -->
<article>
<h1>大標題</h1>
<!-- 節 -->
<section>
<h3>標題1</h3>
<p>文章正文</p>
</section>
<!-- 節 -->
<section>
<h3>標題2</h3>
<p>文章正文</p>
</section>
<!-- 節 -->
<section>
<h3>標題3</h3>
<p>文章正文</p>
</section>
</article>
</main>
<!-- 與頁面主體無關的內容 -->
<aside>
可顯示廣告、引用、側邊欄
</aside>
<!-- 頁腳 -->
<footer>
<!-- 地址 -->
<address>
顯示底部地址
</address>
</footer>
</body>
</html>
body {
text-align: center;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
margin-right: 20px;
}
article {
margin-top: 50px;
}
section {
margin: 30px 0 50px;
}
aside {
position: fixed;
top: 30%;
width: 30%;
padding: 10px;
color: white;
background-color: rgba(0, 0, 0, .3);
}
footer {
height: 10%;
} 更多學習內容，就在碼芽網http://www.mayacoder.com/lesson/index
部分頁面顯示的結果如下：
