HTML 元素標籤語義化及使用場景

時間 2020-04-02

標籤 html 元素標籤語義使用場景欄目 HTML 简体版

原文原文鏈接

靈魂三問：html

標籤語義化是什麼？
爲何要標籤語義化？
標籤語義化使用場景有哪些？

下面讓咱們跟着這三個問題來展開一下本文的內容。web

1、標籤語義化是什麼？

標籤語義化就是讓元素標籤作適當的事情。例如 p 標籤就是表明文本，button 標籤表明按鈕，nav 標籤表明導航等等。瀏覽器

2、爲何要標籤語義化？

其實標籤語義化是給瀏覽器和搜索引擎看的。沒有人關心你寫的 HTML 代碼有沒有正確的使用語義化，只有它們關心這件事情，是否是很暖心？框架

爲何瀏覽器關心？

DOM 的大部份內容具備隱式語義含義。也就是說，DOM 採用的原生 HTML 元素可以被瀏覽器識別，而且能夠預測其在各種平臺上的工做方式。ide

例如用 div 實現的按鈕和用原生 button 實現的按鈕就有一些區別，在表單內 button 能夠不用綁定 onclick 事件就能夠提交表單內容，用 div 實現的按鈕則不行。另外在瀏覽器中按 tab 鍵盤能夠在 button 之間來回切換，而 div 則不能夠。佈局

還有 input 標籤 type 屬性，因爲值的不一樣在手機上的表現也不一樣。例如 type="tel" 和 type="number" 彈出來的數字鍵盤是不同的。flex

爲何搜索引擎關心？

搜索引擎的爬蟲根據標籤來肯定上下文、關鍵字的權重，有利於 SEO。ui

若是你以爲以上兩點理由都不能打動你，從而正確的使用語義化，沒有關係，使用 div 一把梭也是能夠的。搜索引擎

3、標籤語義化使用場景有哪些？

上面是一個比較常見的總體佈局方式，其餘佈局類型其實都是萬變不離其宗，逃不出這個使用框架（文末附上 HTML 源碼）。google

除了總體佈局外，咱們還要更細節一點，關注其餘標籤的使用方式。例如：

a 標籤用於跳轉。
h1 - h5 用於標題
b strong 用於強調
ul li 用於列表

...
這只是其中的一部分標籤使用方式，更多的還得參考文檔。

方便本身，方便他人，請正確使用語義化。

參考資料

文中 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>