小編給大家分享一下為什么要web語義化，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)交城免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

為什么要web語義化？

      首先，人可以通過視覺的劃分判斷內(nèi)容的語義,搜索引擎看到的只是代碼。搜索引擎只能通過標簽來判斷內(nèi)容的語義。因為頁面的很大一部分流量是來自搜索引擎的，要使頁面盡可能地對搜索引擎友好，所以就要盡可能地使標簽語義化。

      所有的標簽都是有自己的語義的，下面給出一部分標簽的語義：

• p 語義：pision(分隔)

• span 語義：Span(范圍)

• ol 語義：Ordered List(排序列表)

• ul 語義：Unordered List(不排序列表)

• li 語義：List Item(列表項目)

     如果無視標簽語義和默認樣式，所有標簽都用p，其實也是可以寫出來視覺效果很好的頁面，只要你靈活運用CSS。但是那樣的話雖然視覺上達到了要求，但是整個頁面一點語義都沒有，搜索引擎還是看不懂。所以，要記住：

     結(jié)構(gòu)(html)才是重點，樣式(css)是用來修飾結(jié)構(gòu)的。所以，要先確定html，確定標簽，再來選用合適的css

     其次，SEO的時候我們經(jīng)常用h2來突出標題，用strong來突出關(guān)鍵字，這確實就是語義化的體現(xiàn)。就目前的搜索引擎來說并不能想訪客那樣很直觀的去查看網(wǎng)頁，它只有分析源碼來體現(xiàn)或猜測網(wǎng)站要表達的內(nèi)容。比如我們想表達某篇文章的標題， 我們或許會這樣寫：

<p id=”title”>文章的標題</p>

訪客或許能理解我們的意思，但搜索引擎就要反復(fù)揣摩了，更好的討好搜索引擎我們可以這樣來寫：

<h2>這是標題</h2>

小提示：h2擁有最高的權(quán)值，在一個頁面中最好指使用1個h2來突出你的內(nèi)容，太多的h2會分散其整個頁面的權(quán)重，對搜索引擎也是非常的不友好。

   語義化優(yōu)點：

• 易于用戶閱讀，樣式丟失的時候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)。

• 有利于SEO，搜索引擎根據(jù)標簽來確定上下文和各個關(guān)鍵字的權(quán)重。

• 方便其他設(shè)備解析，如盲人閱讀器根據(jù)語義渲染網(wǎng)頁

• 有利于開發(fā)和維護，語義化更具可讀性，代碼更好維護，與CSS3關(guān)系更和諧。

   今天先介紹主體結(jié)構(gòu)標簽，如圖所示：

   1、<header>

   <header>定義文檔或者文檔的部分區(qū)域的頁眉，應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器。

   在一個文檔中，您可以定義多個<header>元素，但需要注意的是<header>元素不能作為<address>、<footer> 或 <header> 元素的子元素。

   2、<nav>

   <nav>描述一個含有多個超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁面或頁面內(nèi)部其他部分的鏈接列表。

   在一個文檔中，可定義多個<nav>元素。

   3、<main>

   <main> 定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當是獨一無二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框（除非搜索框作為文檔的主要功能）。

   需要注意的是在一個文檔中不能出現(xiàn)多個<main>標簽。

   4、<article>

   <article>元素表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨立結(jié)構(gòu)，是可獨立分配的、可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內(nèi)容項目。

   當<article>元素嵌套使用時，則該元素代表與外層元素有關(guān)的文章。例如，代表博客評論的<article>元素可嵌套在代表博客文章的<article>元素中。

   5、<aside>

   <aside> 元素表示一個和其余頁面內(nèi)容幾乎無關(guān)的部分，被認為是獨立于該內(nèi)容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。

   6、<footer>

   <footer>定義最近一個章節(jié)內(nèi)容或者根節(jié)點元素的頁腳。一個頁腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息。

   使用footer插入聯(lián)系信息時，應(yīng)在 footer 元素內(nèi)使用 <address> 元素。

   注意不能包含<footer>或者<header>

   7、<section>

   <section>表示文檔中的一個區(qū)域（或節(jié)），比如，內(nèi)容中的一個專題組。

   如果元素內(nèi)容可以分為幾個部分的話，應(yīng)該使用 <article> 而不是 <section>。
不要把 <section> 元素作為一個普通的容器來使用，特別是當<section>僅僅是為了美化樣式或方便腳本使用的時候，應(yīng)使用<p>。

   這幾個標簽，比較容易混淆的是<section>、<article>，所以這里特別說明：

   “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

   通俗來說就是<article>比<section>更具有獨立性、完整性。可通過該段內(nèi)容脫離了所在的語境，是否完整、獨立來判斷。

以上是“為什么要web語義化”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標題：為什么要web語義化
本文地址：http://aaarwkj.com/article44/gghpee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、軟件開發(fā)、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)