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

時間  2019-11-08
標籤 html 語義 一些 簡單 優化 欄目 HTML 简体版
原文   原文鏈接

 

一、什麼是語義化？css

      必應網典的解釋html

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

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

 

二、語義化的好處？ide

  • 在css文件沒有成功加載的時候頁面也能呈現好的內容結構；
  • 利於SEO，讓搜索引擎和爬蟲軟件抓取更多有用的信息，創建索引，獲取較高的權值；
  • 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

 

三、HTML5的語義化優化

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

     

　　結構：搜索引擎

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

　　

四、寫HTML須要注意的點spa

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

 

五、關於SEO優化，HTML須要作些什麼？code

  • 文檔類型統一使用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/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程