HTML的語意化和一些簡單優化

 

1、什麼是語意化？

      必應網典的解釋

語意化是指用合理HTML標記以及其特有的屬性去格式化文件內容。通俗地講,語義化就是對資料和資訊進行處理,使得機器可以理解. 語意化的(X)HTML文件有助於提升你的網站對訪客的易用性，例如使用PDA、文字瀏覽器以及殘障人士將從中受益。對於搜尋引擎或爬蟲軟體來說，則有助於它們建立索引，並可能給予一個較高的權值。 事實上SEO最有效的辦法，就是對網頁的HTML結構進行重構，實質上就是語意化。

　　簡單來說，就是根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼​​的同時讓瀏覽器的爬蟲和機器很好地解析，什麼樣的內容就用什麼樣的標籤。

 

2、語意化的好處？

• 在css檔案沒有成功載入的時候頁面也能呈現好的內容結構；
• 利於SEO，讓搜尋引擎和爬蟲軟體抓取更多有用的信息，建立索引，取得較高的權值；
• 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、行動裝置）以意義的方式來渲染網頁；

 

3、HTML5的語意化

　　最新的HTML5就網頁結構化增加了一系統的結構化標籤

     

　　結構：

<span style="color: #0000ff;"><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>头部<span style="color: #0000ff;"></span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>导航<span style="color: #0000ff;"></span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>内容1<span style="color: #0000ff;"></span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>内容2<span style="color: #0000ff;"></span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>内容3<span style="color: #0000ff;"></span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span>侧边栏<span style="color: #0000ff;"></span><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>底部<span style="color: #0000ff;"></span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>

　　

4、寫HTML要注意的點

• 標籤閉合>，/>;
• 正確使用標籤嵌套，避免行內元素包圍塊元素；
• 合理使用標籤，盡量少使用無語意的標籤div，span，在css檔案沒有成功載入的時候頁面也能呈現好的內容結構；
• 使用

  、

  、

  、

  、

  、

  ,作為標題使用，並且依據重要性遞減，

  是最高的等級；

• 使用

  區分段落，避免使用
  換行；

• 不要使用純樣式的標籤，b，font，u等，改為css設定；
• 使用表格時，使用， ， 包圍頭部，主體內容，表格；

   

  5、關於SEO優化，HTML需要做些什麼？

  • 文檔類型統一使用HTML5 doctype ；
  • meta標籤優化，主要有title、description、keywords三個地方，結束不要使用“ />”，應該直接寫“>”；
  • css檔案最好使用一個，放在頭部標籤裡面；
  • js檔案最好放在底部，避免因載入js檔案而阻塞HTML的渲染；
  • 使用外接文件，避免在HTML直接寫css和js的程式碼；
  • 引入文件時使用絕對地址，絕對地址包括了網站的網域名稱；
  • img標籤加上alt關鍵字，利於SEO優化，盡量不要使用「的」、「上」、「好」、「等等」等，搜尋引擎資料庫預設不收錄的字；
  • logo處加h1標籤，搜尋引擎預設h1標籤這個標題是網頁中最重要的訊息，所以我們把最重要資訊入在

    標籤內；

   

  關於html網頁是否符合標準，可以在這個網頁檢查，直接輸入連結即可查看檢查結果

  https://validator.w3.org/nu/