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

WBOY
發布: 2016-10-12 09:50:14
原創
947 人瀏覽過

 

1、什麼是語意化?

      必應網典的解釋

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

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

 

2、語意化的好處?

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

 

3、HTML5的語意化

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

     

  結構:

<span style="color: #0000ff;"><</span><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><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><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><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><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><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><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><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>
登入後複製

  

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/

     

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!