、語義化標(biāo)簽含義

語義化的標(biāo)簽，旨在讓標(biāo)簽有自己的含義。

二、語義化標(biāo)簽的優(yōu)勢

1. 代碼結(jié)構(gòu)清晰，方便閱讀，有利于團(tuán)隊(duì)合作開發(fā)。
2. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以語義的方式來渲染網(wǎng)頁。
3. 有利于搜索引擎優(yōu)化（SEO）。

三、常見的語義化標(biāo)簽

<title>：頁面主體內(nèi)容。

<h>：h1~h6，分級標(biāo)題，<h1> 與 <title> 協(xié)調(diào)有利于搜索引擎優(yōu)化。

<ul>：無序列表。

<li>：有序列表。

<header>：頁眉通常包括網(wǎng)站標(biāo)志、主導(dǎo)航、全站鏈接以及搜索框。

<nav>：標(biāo)記導(dǎo)航，僅對文檔中重要的鏈接群使用。

<main>：頁面主要內(nèi)容，一個頁面只能使用一次。如果是web應(yīng)用，則包圍其主要功能。

<article>：定義外部的內(nèi)容，其中的內(nèi)容獨(dú)立于文檔的其余部分。

<section>：定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。

<aside>：定義其所處內(nèi)容之外的內(nèi)容。如側(cè)欄、文章的一組鏈接、廣告、友情鏈接、相關(guān)產(chǎn)品列表等。

<footer>：頁腳，只有當(dāng)父級是body時，才是整個頁面的頁腳。

<small>：呈現(xiàn)小號字體效果，指定細(xì)則，輸入免責(zé)聲明、注解、署名、版權(quán)。

<strong>：和 em 標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些。

<em>：將其中的文本表示為強(qiáng)調(diào)的內(nèi)容，表現(xiàn)為斜體。

<mark>：使用黃色突出顯示部分文本。

<figure>：規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）（默認(rèn)有40px左右margin）。

<figcaption>：定義 figure 元素的標(biāo)題，應(yīng)該被置于 figure 元素的第一個或最后一個子元素的位置。

<cite>：表示所包含的文本對某個參考文獻(xiàn)的引用，比如書籍或者雜志的標(biāo)題。

<blockquoto>：長引用，塊引用擁有它們自己的空間。

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

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

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

<del>：移除的內(nèi)容。

<meter>：定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量。（Internet Explorer 不支持 meter 標(biāo)簽）

四. 代碼示例

    <!-- hgroup 標(biāo)題用來為標(biāo)題分組，可以將一組相關(guān)的標(biāo)題同時放入到hgroup中 -->
    <hgroup>
         <h1>回鄉(xiāng)偶書</h1>
         <h2>其二</h2>
    </hgroup>


    <!-- p標(biāo)簽    表示頁面中一個段落 也是塊元素 -->
    <p>在p標(biāo)簽的內(nèi)容 表示為一個段落</p>


    <!-- 
    em標(biāo)簽 表示語調(diào)語氣加重 
    行內(nèi)元素 ：不會獨(dú)占一行的元素
    -->
    <p>今天天氣<em>真</em>不錯</p>


    <!-- strong 表示強(qiáng)調(diào)，重要內(nèi)容 -->
    <p>你今天必須要<strong>完成作業(yè)</strong></p>


    魯迅說
    <!-- blockquote 表示 引用長引用  塊元素 -->
    <blockquote>
        我說過很多話 但我都不記得了
    </blockquote>


    <!-- q標(biāo)簽 表示短引用 為行內(nèi)元素 -->
    子曰<q>溫故而知新</q>


</body>

關(guān)聯(lián)面試題：請簡述下你對HTML語義化的理解？知道的可以在評論區(qū)留言！[送心]

TML 的語義化標(biāo)簽是指用于描述內(nèi)容結(jié)構(gòu)和含義的標(biāo)簽。

這些標(biāo)簽不僅僅用于樣式和布局，更重要的是通過標(biāo)簽本身傳達(dá)出內(nèi)容的語義和結(jié)構(gòu)，使得頁面具有更好的可讀性、可訪問性和搜索引擎優(yōu)化。

以下是一些常見的 HTML 語義化標(biāo)簽：

1. <header>：表示頁面或頁面內(nèi)部的頭部，通常包含網(wǎng)站的標(biāo)題、導(dǎo)航欄、標(biāo)志等。
2. <nav>：表示導(dǎo)航欄，用于包含頁面的導(dǎo)航鏈接。
3. <main>：表示頁面的主要內(nèi)容，每個頁面應(yīng)該只有一個<main>標(biāo)簽。
4. <article>：表示獨(dú)立的、完整的文章或內(nèi)容塊，如博客文章、新聞報道等。
5. <section>：表示頁面中的一個獨(dú)立區(qū)域或部分，可以包含相關(guān)的內(nèi)容組合。
6. <aside>：表示頁面的側(cè)邊欄或附屬內(nèi)容，通常包含與主要內(nèi)容相關(guān)但可以獨(dú)立存在的內(nèi)容。
7. <footer>：表示頁面或頁面內(nèi)部的底部，通常包含版權(quán)信息、聯(lián)系方式等。
8. <figure>和<figcaption>：<figure>表示一組與文檔相關(guān)的圖像、圖表或代碼等媒體內(nèi)容，而<figcaption>則表示這些內(nèi)容的標(biāo)題或說明。
9. <time>：表示日期和時間，用于標(biāo)記具體的時間信息。
10. <blockquote>：表示一個塊引用，通常用于引用其他來源的文本。

通過使用這些語義化標(biāo)簽，我們可以更清晰地描述頁面的結(jié)構(gòu)和內(nèi)容

一）HTML語義化

語義化可以總結(jié)為 根據(jù)內(nèi)容選擇標(biāo)簽，用最恰當(dāng)?shù)臉?biāo)簽來標(biāo)記內(nèi)容
例如網(wǎng)頁中的標(biāo)題使用<h1>~<h6>這樣的標(biāo)簽，而不是使用<div>+css

（二）語義化好處

• 使HTML結(jié)構(gòu)變得清晰，有利于維護(hù)代碼和添加樣式
• 通常語義化HTML會使代碼變的更少，使頁面加載更快
• 即使在沒有CSS樣式的條件下，也能很好地呈現(xiàn)出內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)
• 便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)，可以減少差異化
• 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁
• 提升搜索引擎優(yōu)化(SEO)的效果。和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息，爬蟲可以依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重

（三）注意語義化編寫

• 盡可能少的使用無語義的標(biāo)簽<div>和<span>
• 不要使用純樣式標(biāo)簽，如<b>是純樣式標(biāo)簽，而<strong>的語義為加粗
• 在<lable>標(biāo)簽中設(shè)置for來讓說明文本和相對應(yīng)的<input>關(guān)聯(lián)起來
• 表單域要用<fieldset>標(biāo)簽包起來，并用<legend>標(biāo)簽說明表單的用途
• 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中，<strong>默認(rèn)樣式是加粗，<em>是斜體
• 使用表格時，標(biāo)題要用<caption>，表頭用<thead>，主體部分用<tbody>包圍，尾部用<tfoot>包圍。表頭和一般單元格要區(qū)分開，表頭用<th>，單元格用<td>

對了，在這里說一下，我目前是在職web前端開發(fā)，如果你現(xiàn)在正在學(xué)習(xí)前端，了解前端，渴望成為一名合格的web前端開發(fā)工程師，在入門學(xué)習(xí)前端的過程當(dāng)中有遇見任何關(guān)于學(xué)習(xí)方法，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問題，都可以隨時關(guān)注并私信我：前端，我都會根據(jù)大家的問題給出針對性的建議，缺乏基礎(chǔ)入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎(chǔ)精講視頻教程， 還有我做web前端技術(shù)這段時間整理的一些學(xué)習(xí)手冊，面試題，開發(fā)工具，PDF文檔書籍教程，都可以直接分享給大家。

（四）常用語義化標(biāo)簽

• <h1>~<h6> 定義頁面的標(biāo)題，<h1>-<h6>元素等級依次降低。
• <header> 頁眉通常包括網(wǎng)站標(biāo)志、主導(dǎo)航、全站鏈接以及搜索框。
• <nav> 提供當(dāng)前文檔內(nèi)或其他文檔的導(dǎo)航鏈接，導(dǎo)航部分的常見示例是菜單，目錄和索引。
• <main> 主要內(nèi)容區(qū)域由與文檔的中心主題或應(yīng)用程序的中心功能直接相關(guān)或擴(kuò)展的內(nèi)容組成。
• <article> 專注于單個主題的博客文章，報紙文章或網(wǎng)頁文章。
• <address> 提供了一個或多個人員或組織的聯(lián)系信息。
• <section> 表示HTML文檔中包含的獨(dú)立部分。
• <aside> 表示文檔的一部分，其內(nèi)容僅與文檔的主要內(nèi)容間接相關(guān),通常顯示為側(cè)邊欄。
• <footer> 定義文檔的底部區(qū)域，通常包含文檔的作者，著作權(quán)信息，聯(lián)系信息等。
• <hgroup> 表示文檔部分的多級標(biāo)題，它對一組<h1>~<h6>元素進(jìn)行分組。
• <ul> 表示項(xiàng)目的無序列表，通常呈現(xiàn)為項(xiàng)目符號列表。
• <ol> 表示項(xiàng)目的有序列表，通常呈現(xiàn)為編號列表。
• <li> 表示列表中的項(xiàng)目。
• <strong> 表示強(qiáng)調(diào)突出重點(diǎn)內(nèi)容，瀏覽器通常以粗體顯示內(nèi)容。
• <em> 標(biāo)記強(qiáng)調(diào)重點(diǎn)的文本，可以嵌套<em>元素，嵌套的每個級別都表示強(qiáng)調(diào)程度更高。
• <small> 代表旁注和小字體，例如版權(quán)和法律文本，獨(dú)立于其樣式表示。
• <abbr> 表示縮寫或首字母縮寫詞。
• <cite> 用于描述對引用的創(chuàng)意作品的引用，并且必須包括該作品的標(biāo)題。
• <figure> 表示獨(dú)立的內(nèi)容，可能帶有可選的標(biāo)題，該標(biāo)題使用<figcaption>元素指定。
• <figcaption> 表示說明其父<figure>元素的其余內(nèi)容的標(biāo)題或圖例。
• <blockquote> 定義塊引用，可以使用<cite>元素提供文本表示
• <mark> 表示被標(biāo)記或突出顯示以供參考或標(biāo)記目的的文本。
• <time> 表示特定的時間。
• <data> 表示特定的日期。
• <dfn> 用于表示在定義短語或句子的上下文中定義的術(shù)語。
• <code> 計(jì)算機(jī)代碼的簡短片段的方式顯示其內(nèi)容的樣式。
• <samp> 輸出的示例或引用的內(nèi)聯(lián)文本或樣本文本。
• <kbd> 表示文本是從鍵盤上鍵入的，它經(jīng)常用在與計(jì)算機(jī)相關(guān)的文檔或手冊中。
• <del> 表示已從文檔中刪除的文本范圍。
• <ins> 表示已添加到文檔中的文本范圍。
• <menu> 表示用戶可以執(zhí)行或激活的一組命令，例如上下文菜單等。
• <dialog> 表示對話框或其他交互式組件，例如檢查器或子窗口。
• <summary> 元素為<details>元素的顯示框指定摘要，標(biāo)題或圖例。
• <details> 描述文檔或文檔某個部分的細(xì)節(jié)。

（五）棄用的HTML元素

這些是舊的HTML元素，已棄用，不應(yīng)繼續(xù)使用。 不要在新項(xiàng)目中使用它們，應(yīng)盡快在舊項(xiàng)目替換它們，即使它們現(xiàn)在依然可以使用。

<acronym>、<applet>、<basefont>、<bgsound>、<big>、<blink>、<center>、<command>、<content>、<dir>、<element>、<font>、<frame>、<frameset>、<image>、<isindex>、<keygen>、<listing>、<marquee>、<menuitem>、<multicol>、<nextid>、<nobr>、<noembed>、<noframes>、<plaintext>、<shadow>、<spacer>、<strike>、<tt>、<xmp>

原文鏈接：https://mp.weixin.qq.com/s/nP2aM0CGJAJYxq-PilD43w

作者：WindrunnerMax 山科小站