首頁 > 開發者 > JavaScript

HTML的語義化和一些簡單最佳化，html語義最佳化

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

HTML的語義化和一些簡單最佳化，html語義最佳化

 

1、什麼是語義化？

      必應網典的解釋

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

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

 

2、語義化的好處？

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

 

3、HTML5的語義化

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

     

　　結構：

<header>頭部</header><nav>導航</nav><article>    <section>內容1</section>    <section>內容2</section>    <section>內容3</section></article><aside>側邊欄</aside><footer>底部</footer>

　　

4、寫HTML需要注意的點

  • 標籤閉合</>，/>;
  • 正確使用標籤嵌套，避免行內元素包圍塊元素；
  • 合理使用標籤，盡量少使用無語義的標籤div，span，在css檔案沒有成功載入的時候頁面也能呈現好的內容結構；
  • 使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為標題使用，並且依據重要性遞減，<h1>是最高的等級；
  • 使用<p>區分段落，避免使用<br />換行；
  • 不要使用純樣式的標籤，b，font，u等，改為css設定；
  • 使用表格時，使用<thead>，<tbody>，<tfoot>包圍頭部，主體內容，表格；

 

5、關於SEO最佳化，HTML需要做些什嗎？

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

 

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

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

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More