HTML5新特性之語義化布局標簽，擺脫傳統div布局

言

曾幾何時，前端的頁面布局一直采用div，但是div本身并沒有實際的意義，它只是定義了一個區域，而且這個區域是做什么的瀏覽器并不知道，不利于頁面的SEO優化。

因此HTML5中新增的語義化標簽就很好的解決了這個問題，當然它還有其他一些好處，接下來我們就一起來看看吧。

HTML5

語義化標簽的優點

即使在沒有CSS的支持下，瀏覽器依然能呈現出良好的內容結構。
有利于SEO，語義化的標簽更有利于爬蟲去解析更多有效信息。
跨設備體驗，不同設備都支持語義化標簽，那么即使在不同設備下依然可以有無縫體驗。
便于代碼開發和維護，語義化可以增加代碼的可讀性，讓團隊成員可以更好理解彼此的代碼意圖。

HTML5新增的語義化標簽

那么在HTML5中新增了哪些利于頁面布局的HTML5標簽呢？

我們先通過以下這張圖來看看。

HTML5新增語義化標簽

header標簽

header標簽表示頁面或一個區域(section)的頁眉部分，通常在里面包含h1-h6標簽來使用。

我們直接通過代碼來看看在瀏覽器上的效果。

header標簽效果

footer標簽

footer標簽和header標簽類似，表示頁面或一個區域(section)的頁腳部分，通常會將網站的證書，許可，版權協議等內容放在這塊。

footer標簽

hgroup標簽

hgroup標簽一般用于h1-h6標簽的組合，比如主標題，副標題，三級標題的組合情況。

我們通過以下代碼段來看看其代碼組織形式。

hgroup標簽

需要注意的一點是，如果需要使用hgroup標簽則保證在hgroup標簽里至少有兩個h標簽，如果只有一個h標簽，則應該去掉hgroup標簽。

nav標簽

nav標簽主要用于定義頁面的導航部分，例如頁面或者section中的側邊目錄欄。

其使用方式如下代碼段所示。

nav標簽

aside標簽

aside標簽一般會指定網頁的相關內容，友情鏈接等附注性的東西，類似于廣告也可以使用aside標簽。

main標簽

main標簽定義一個頁面的主要內容，在一個頁面中只能使用一次。

article標簽

article標簽表示的是一個獨立完整的內容區域，比如一張報紙的某個獨立版塊。

在article標簽內部可以包含其他語義化標簽，其基本使用如下所示。

article標簽

section標簽

section標簽表示的是文檔中內容的分節或分段，上述的article，nav或者aside其實都可以看做特殊的section標簽，如果能用article，nav，aside標簽，最好不要用section標簽。

section標簽與與article標簽可以互相嵌套，需要視具體情況而定。

結束語

如果你的布局還是只有div，那么看完了今天這篇文章后完全可以嘗試下新的HTML5標簽噢。

感興趣的同學可以加下我自己創建的Q群，大家相互學習交流，我也會盡力維護好群環境，群號如下所示。

號碼

程序員web前端分享常見html5語義化標簽，我們知道，創建結構清晰的頁面可以建立良好的語義化基礎，也降低了使用css的難度，下面總結了一些常用的語義化標簽，有空慢慢更新，歡迎大家補充

語義化HTML：用最恰當的HTML元素標記的內容。

優點：1 提升可訪問性； 2 SEO； 3 結構清晰，利于維護；

（HTML5舊的行內元素都被歸類為短語內容）

通用容器：div——塊級通用容器；span——短語內容無語義容器。

如果語義不合適，也不要霸王硬上弓，=。。 =老實的用div吧。

< title></title>：簡短、描述性、唯一（提升搜索引擎排名）。

搜索引擎會將title作為判斷頁面主要內容的指標，有效的title應該包含幾個與頁面內容密切相關的關鍵字，建議將title核心內容放在前60個字符中。

<hn></hn>：h1~h6分級標題，用于創建頁面信息的層級關系。

對于搜索引擎而言，如果標題與搜索詞匹配，這些標題就會被賦予很高的權重，尤其是h1。

<header></header>：頁眉通常包括網站標志、主導航、全站鏈接以及搜索框。

也適合對頁面內部一組介紹性或導航性內容進行標記。

<nav></nav>：標記導航，僅對文檔中重要的鏈接群使用。

Html5規范不推薦對輔助性頁腳鏈接使用nav，除非頁腳再次顯示頂級全局導航、或者包含招聘信息等重要鏈接。

<main></main>：頁面主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能。

<article></article>：包含像報紙一樣的內容= =||是這么理解的，表示文檔、頁面、應用或一個獨立的容器。

article可以嵌套article，只要里面的article與外面的是部分與整體的關系。

<section></section>：具有相似主題的一組內容，比如網站的主頁可以分成介紹、新聞條目、聯系信息等條塊。

如果只是為了添加樣式，請用div！

<aside></aside>：指定附注欄，包括引述、側欄、指向文章的一組鏈接、廣告、友情鏈接、相關產品列表等。

如果放在main內，應該與所在內容密切相關。

<footer></footer>：頁腳，只有當父級是body時，才是整個頁面的頁腳。

<small></small>：指定細則，輸入免責聲明、注解、署名、版權。

只適用于短語，不要用來標記“使用條款”、“隱私政策”等長的法律聲明。

<strong></strong>：表示內容重要性。

<em></em>：標記內容著重點（大量用于提升段落文本語義）。

<mark></mark>：突出顯示文本（yellow），提醒讀者。

在HTML5中em是表示強調的唯一元素，而strong則表示重要程度。

<b></b>：出于實用目的提醒讀者的一塊文字，不傳達任何額外的重要性

<i></i>：不同于其他文字的文字= =|||這個翻譯真的是······

<figure></figure>：創建圖（默認有40px左右margin）。

<figcaption></figcaption>：figure的標題，必須是figure內嵌的第一個或者最后一個元素。

<cite></cite>：指明引用或者參考，如圖書的標題，歌曲、電影、等的名稱，演唱會、音樂會、規范、報紙、或法律文件等。

只用于參考源本身，而不是從中引述。

<blockquoto></blockquoto>：引述文本，默認新的一行顯示。

<q></q>：短的引述（跨瀏覽器問題，盡量避免使用）。

可以對blockquoto和q元素使用cite屬性（不是cite元素！），對搜索引擎自動化工具有用。cite=“URL”引述來源地址。

<time></time>：標記時間。datetime屬性遵循特定格式，如果忽略此屬性，文本內容必須是合法的日期或者時間格式。

不再相關的時間用s標簽。

<abbr></abbr>：解釋縮寫詞。使用title屬性可提供全稱，只在第一次出現時使用就ok。

abbr[title]{ border-bottom:1px dotted #000; }

<dfn></dfn>：定義術語元素，與定義必須緊挨著，可以在描述列表dl元素中使用。

<address></address>：作者、相關人士或組織的聯系信息（電子郵件地址、指向聯系信息頁的鏈接）。

如果提供整個頁面的作者聯系信息，一般放在頁面級footer里。不能包含文檔或者文檔等其他內容。

<del></del>：移除的內容。

<ins></ins>：添加的內容。

少有的既可以包圍塊級，又可以包圍短語內容的元素。

<code></code>：標記代碼。包含示例代碼或者文件名（< < > >）

<pre></pre>：預格式化文本。保留文本固有的換行和空格。

<meter></meter>：表示分數的值或者已知范圍的測量結果。如投票結果。

例如：<meter value="0.2" title=”Miles“>20%completed</meter>

<progress></progress>：完成進度。可通過js動態更新value。

著互聯網技術的發展，網頁內容變得越來越豐富。HTML5 作為標記語言的最新標準，不僅提供了更多的功能，還引入了一系列語義化標簽。這些標簽使得網頁內容的結構更加清晰，有助于搜索引擎優化（SEO），并提高了網站的可訪問性。

語義化標簽的優勢

語義化標簽通過提供更具描述性的元素名稱，使得文檔內容的結構更加明確。這樣做有幾個明顯的優勢：

提高可讀性：代碼的可讀性得到提升，其他開發者（或未來的你）可以快速理解頁面結構。
SEO 優化：搜索引擎能夠更好地解析網頁內容，提高網頁在搜索結果中的排名。
支持無障礙訪問：語義化標簽有助于屏幕閱讀器正確解讀網頁內容，使網站對視障用戶更加友好。

語義化標簽實例

下面，我們將通過幾個例子來展示如何使用HTML5的語義化標簽來構建網頁。

示例1：文章結構

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 語義化標簽示例</title>
</head>
<body>

<article>
    <header>
        <h1>HTML5 的新特性</h1>
        <p>發布日期：2023-12-17</p>
        <p>作者：張三</p>
    </header>
    <section>
        <h2>引入了新的語義化標簽</h2>
        <p>HTML5 定義了一系列新的元素，用于更好地描述文檔的不同部分...</p>
    </section>
    <section>
        <h2>表單控件的增強</h2>
        <p>HTML5 提供了更多的表單控件，如 date、time、email 等...</p>
    </section>
    <footer>
        <p>版權所有 ? 2023 張三</p>
    </footer>
</article>

</body>
</html>

在這個示例中，我們使用了<article>、<header>、<section>和<footer>等標簽來構建一個文章的基本結構，使得文章的主體、標題、各個章節和尾注的語義更加明確。

示例2：導航菜單

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>導航菜單示例</title>
    <style>
        /* 重置ul和li的默認樣式 */
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            background-color: #333;
            text-align: center;
        }
        
        nav ul li {
            display: inline-block;
        }
        
        /* 設置鏈接的基本樣式 */
        nav ul li a {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        
        /* 鼠標懸停時的樣式 */
        nav ul li a:hover {
            background-color: #555;
        }
    </style>
</head>
<body>

<nav>
    <ul>
        <li><a href="#home">首頁</a></li>
        <li><a href="#news">新聞</a></li>
        <li><a href="#contact">聯系我們</a></li>
        <li><a href="#about">關于我們</a></li>
    </ul>
</nav>

</body>
</html>

使用<nav>標簽定義導航鏈接集合，這有助于搜索引擎和輔助技術確定頁面中的導航部分。

在這個示例中，做了以下幾點樣式設置：

移除了ul和li的默認樣式（比如列表前面的小圓點），并給導航欄設置了一個深色背景。
將li元素設置為inline-block，使其水平排列。
為鏈接（a標簽）設置了基本的樣式，包括背景色、字體顏色、內邊距等，以及鼠標懸停時的背景色變化。

示例3：側邊欄

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>側邊欄示例</title>
    <style>
        /* 設置側邊欄的基本樣式 */
        aside {
            width: 250px; /* 側邊欄寬度 */
            padding: 20px; /* 內邊距 */
            background-color: #f4f4f4; /* 背景色 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 陰影效果 */
            position: fixed; /* 固定位置 */
            top: 0; /* 頂部對齊 */
            left: 0; /* 左側對齊 */
            height: 100%; /* 高度100% */
        }

        /* 設置標題的樣式 */
        aside h2 {
            color: #333; /* 字體顏色 */
            margin-bottom: 20px; /* 與下方內容的間距 */
        }

        /* 重置列表的默認樣式，并設置列表項樣式 */
        aside ul {
            list-style: none; /* 移除列表項的默認樣式 */
            padding: 0; /* 移除默認內邊距 */
            margin: 0; /* 移除默認外邊距 */
        }

        aside ul li {
            margin-bottom: 10px; /* 列表項之間的間距 */
        }

        /* 設置鏈接的基本樣式 */
        aside ul li a {
            text-decoration: none; /* 移除下劃線 */
            color: #333; /* 字體顏色 */
            font-weight: bold; /* 字體加粗 */
        }

        /* 鼠標懸停時的樣式 */
        aside ul li a:hover {
            color: #007bff; /* 鼠標懸停時的字體顏色 */
        }
    </style>
</head>
<body>

<aside>
    <h2>相關文章</h2>
    <ul>
        <li><a href="#">HTML5 基礎</a></li>
        <li><a href="#">CSS3 新特性</a></li>
        <li><a href="#">JavaScript 高級程序設計</a></li>
    </ul>
</aside>

</body>
</html>

<aside>標簽通常用于包含頁面主內容之外的內容，如側邊欄，它可以包含相關鏈接、廣告、站點地圖等。

示例4：頁腳信息

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>頁腳信息示例</title>
</head>
<body>

<footer>
    <p>聯系方式：example@example.com</p>
    <p>地址：中國某地某街道123號</p>
    <p>版權所有 ? 2023 HTML5前端工程師</p>
</footer>

</body>
</html>

<footer>標簽定義了文檔或節的頁腳，通常包含作者信息、版權信息、聯系信息等。

示例5：主要內容區域

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主要內容區域示例</title>
</head>
<body>

<main>
    <article>
        <h1>HTML5 語義化標簽</h1>
        <p>HTML5 提供了許多新的元素，用于更清晰地描述你的內容...</p>
    </article>
    <article>
        <h1>HTML5 表單特性</h1>
        <p>HTML5 為表單輸入提供了多種新的類型，如 color、date 等...</p>
    </article>
</main>

</body>
</html>

<main>標簽用于指定文檔的主要內容，它應該是文檔中最重要的內容區域，通常不包括那些在整個站點中重復出現的內容（如導航鏈接）。

通過上述示例，我們可以看到HTML5語義化標簽如何使網頁結構更加清晰，并為搜索引擎優化和可訪問性提供了支持。隨著技術的發展，我們有責任編寫更高質量的代碼，不僅為了自己，也為了創建一個更好的網絡環境。

在線咨詢

上一篇：HTML <a> 標簽
下一篇：使用CSS3的新特性完成一個翻書的動畫效果，來學習一下吧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商