article標籤,使用後感受和P(段落)差很少,語義化的標籤。
<aside> 標籤訂義article之外的內容(可用作文章的側欄). 語義化的標籤。
html 標籤有幾種分類,其中有一種就是網頁佈局性質的標籤,如最經常使用的 div。
拋開之前的傳統網頁佈局(table佈局)不談,就說如今的網頁佈局——div+css。
你好比說,你要作一個最簡單的一行兩列的網頁,外層是一個 div 容器,裏面兩個 div,左邊是導航菜單,右邊是內容,爲了實現網頁佈局,你確定得用 css 定位,爲了方便定位,你確定得爲 div 設置 id 或者 class,咱們暫且用 id。
外層容器 div :id="wrap",內層左邊 div:id="aside",內層右邊 div:id="article"。
爲何左邊導航 id 要給它設置爲 aside(旁邊),而不用 div一、div2 呢?
由於 aside 賦予了 div 意義,給當前開發者和後期維護者帶來方便,一看到 <div id="aside"> 我就知道它的做用,看到 <div id="div1"> 誰知道這是什麼東西,就像 div 標籤自己同樣,毫無心義。
而 article 和 aside 就像 div 同樣,只是佈局標籤,除了標籤名字不同,其餘功能意義基本是同樣的,article、aside 裏面的字體、背景、邊框等沒有任何特殊的樣式,也不是鼠標點擊了 aside 標籤以後會出現什麼特殊的效果,由於它們只是簡簡單單的標籤。
既然功能和 div 如出一轍,html5 爲什麼畫蛇添足,又生產出幾個多餘的 「div」 出來呢?
有句話叫作:存在的就是合理的。
由於不少網站佈局是重複的,全世界網站有不少都是左邊是導航,右邊是正文內容,而後給div設置id來用css佈局,由於有這個需求,html5 就人性化的添加了幾個標籤,從而簡化了開發人員的開發,畢竟,<aside> 與 <div id="aside">,那個更好?
html 角度:前者比後者少寫幾行代碼,必定程度簡化了網頁文件大小。
css 角度:前者直接使用 aside 就能獲取到標籤,後者須要經過 id 。
js 角度:同上。
以前也據說過這麼一個消息,說一些移動設備(如 ipad),在解析 html5 標籤時,遇到 aside 標籤可能會有個性化的展現,可能效果更美觀。
總結:
<article> 就看作是 <div id="article">,<aside> 你就看作是 <div id="aside">,僅僅是人爲的給div 換了一個說話,換湯不換藥,仍是 div 。