、語義化標簽含義

語義化的標簽，旨在讓標簽有自己的含義。

二、語義化標簽的優勢

1. 代碼結構清晰，方便閱讀，有利于團隊合作開發。
2. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。
3. 有利于搜索引擎優化（SEO）。

三、常見的語義化標簽

<title>：頁面主體內容。

<h>：h1~h6，分級標題，<h1> 與 <title> 協調有利于搜索引擎優化。

<ul>：無序列表。

<li>：有序列表。

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

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

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

<article>：定義外部的內容，其中的內容獨立于文檔的其余部分。

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

<aside>：定義其所處內容之外的內容。如側欄、文章的一組鏈接、廣告、友情鏈接、相關產品列表等。

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

<small>：呈現小號字體效果，指定細則，輸入免責聲明、注解、署名、版權。

<strong>：和 em 標簽一樣，用于強調文本，但它強調的程度更強一些。

<em>：將其中的文本表示為強調的內容，表現為斜體。

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

<figure>：規定獨立的流內容（圖像、圖表、照片、代碼等等）（默認有40px左右margin）。

<figcaption>：定義 figure 元素的標題，應該被置于 figure 元素的第一個或最后一個子元素的位置。

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

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

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

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

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

<del>：移除的內容。

<meter>：定義已知范圍或分數值內的標量測量。（Internet Explorer 不支持 meter 標簽）

四. 代碼示例

    <!-- hgroup 標題用來為標題分組，可以將一組相關的標題同時放入到hgroup中 -->
    <hgroup>
         <h1>回鄉偶書</h1>
         <h2>其二</h2>
    </hgroup>


    <!-- p標簽    表示頁面中一個段落 也是塊元素 -->
    <p>在p標簽的內容 表示為一個段落</p>


    <!-- 
    em標簽 表示語調語氣加重 
    行內元素 ：不會獨占一行的元素
    -->
    <p>今天天氣<em>真</em>不錯</p>


    <!-- strong 表示強調，重要內容 -->
    <p>你今天必須要<strong>完成作業</strong></p>


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


    <!-- q標簽 表示短引用 為行內元素 -->
    子曰<q>溫故而知新</q>


</body>

關聯面試題：請簡述下你對HTML語義化的理解？知道的可以在評論區留言！[送心]

TML 的語義化標簽是指用于描述內容結構和含義的標簽。

這些標簽不僅僅用于樣式和布局，更重要的是通過標簽本身傳達出內容的語義和結構，使得頁面具有更好的可讀性、可訪問性和搜索引擎優化。

以下是一些常見的 HTML 語義化標簽：

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

通過使用這些語義化標簽，我們可以更清晰地描述頁面的結構和內容

一）HTML語義化

語義化可以總結為 根據內容選擇標簽，用最恰當的標簽來標記內容
例如網頁中的標題使用<h1>~<h6>這樣的標簽，而不是使用<div>+css

（二）語義化好處

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

（三）注意語義化編寫

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

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

（四）常用語義化標簽

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

（五）棄用的HTML元素

這些是舊的HTML元素，已棄用，不應繼續使用。 不要在新項目中使用它們，應盡快在舊項目替換它們，即使它們現在依然可以使用。

<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 山科小站