HTML5-使用其他語意標籤代替div

-

<div>

<div>是沒有語意的標籤，若你單單使用它，你會發現它不會像h1~h6或者a連結那樣有自己的語意;我們可以解釋成它是一個區塊，將網頁內容包覆並使用CSS做排版用的標籤

 <body>
  <h1>網頁標題</h1>
  <div>
   把內容放進裡面
   <div>也可以區塊包覆區塊</div>
  </div>
  <div>可增加多個區塊做排版</div>
 </body>


範例:
See the Pen
Float by yennnnyu (@yennnnn)
on CodePen.


通常一個網頁會有header、nav、content、footer..等，我們都使用<div>去排版的話
1.程式碼上很亂，無法快速知道你寫的是屬於哪個部分
 2.網頁軟體或者搜尋引擎不清楚你這是甚麼功能導致SEO效果低


以下幾個是和div一樣沒語意但又能讓網頁了解的意思的標籤

<header>

:用在於標頭上，通常會包含網站標題、Logo..等內容

<nav>

:網頁的選單、導覽列

<main>

:使用在網站的主題、主要內容

<aside>

:用於側邊欄位或者需要標記的部分、附加內容

<article>

:使用在文章、新聞雜誌、留言論壇..等

<section>

:它一個區塊，類似網頁大綱，通常一個<section>內會包含一個標題

<footer>

:為頁尾，可放聯絡方式、著作權..等相關連結內容




以上述方式，我們假如都是用div原本會是這樣

 <body>
   <div>logo
          <div>選單</div>
   </div>
   <div>
   <div>內容</div>
   <div>內容</div>
   <div>內容</div>
   </div>
   <div>中間主要內容</div>
   <div>其他內容</div>
   <div>頁尾</div>
 </body>

變成

 <body>
   <header>logo
    <nav>選單</nav>
   </header>
   <main>
    <article>內容</article>
    <article>內容</article>
    <article>內容</article>
   </main>
   <section>其他內容</section>
   <section>其他內容</section>
   <footer>頁尾</footer>
 </body>

以上，是不是變得更俐落了點，也能了解每塊區域都在做什麼了
若想了解更多，也可以到MDN看每個標籤語意所包含的意思哦!



留言

張貼留言