前端工程師的必上HTML5基礎課程(4)六個元素排版-上


前端工程師的必上HTML5基礎課程(4)六個元素排版-上

HTML5比前一代的HTML4又多了六個語意元素,繼續往下看,學習如何好好善用它們! 

為何 HTML5 需要增加這些語意元素?

讓我們回想一下,在HTML4 的時代,前端工程師只能使用<div>和<span> 兩個元素進行網頁排版的工作。但是因為網頁排版本身又分成標題、導覽列、選單、側欄等區塊,不只兩種元素。因此常常看到有 <div id="header">、 <div class="nav">等元素搭配 id 和 class 的「延伸」用法,既冗長又麻煩。

因此 HTML5 便成為前端工程師的救星。它提供了一系列簡單俐落的語意元素(Semantic Elements)來取代,其中包括<header>、<nav>、<main>、<footer>等。像是 HTML4 的<div id="header">在 HTML5 上就可以俐落的使用<header>來取代。不但在寫法上看起來精簡,且 Google 的網頁爬蟲也能更快辨識到網頁的標題、目錄、內容等,因此也有增強網頁 SEO 的效果。以下就針對這些語意元素(Semantic Elements,也被稱為語意標籤,就是「有意義的元素」)來分別作說明:

<header>

header語意元素定義網頁的標頭,通常放置網站標題。

在 HTML4 中, header 元素的寫法如下:
<div id="header">
在 HTML5 就不用那麼麻煩,只要單單使用<header>標籤來取代即可。範例如下:
<!doctype html>
<html>
  <head></head>
  <body>
     <header>
       <h1><header></h1>網頁標題
    </header>
  </body>
</html>

以上代碼呈現結果為:
See the Pen header by Tedutw (@Tedutw) on CodePen.

<footer>

footer語意元素使用時機很廣泛,通常都至於網頁的最下方。

以下資訊常常會出現在<footer>...</footer>標籤內:
-聯絡資訊
-隱私權政策 (Private Policy)
-社群連結 icon 按鈕圖示 (如Facebook、Twitter、IG等)
-服務條款 (Terms of Service)
-版權聲明 (Copyright Information)
-網站地圖 (Sitemap)

<nav>

nav 標籤常出現在<header>標籤下方,或是最左、最右邊(有些部落格網站會這樣編排),標籤內容為網頁的選單、導覽。範例如下

最後,綜合本文的<header>、<footer>、<nav>標籤,呈現結果如下:

HTML5 各標籤 (header、nav、article、aside 與 footer) 在頁面上的位置

以上的頁面,原始碼如下所示:
<DOCTYPE! html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic html layout example</title>
</head>
<body>
<!--header-->
  <header>
    <h1>< header ><p>可放置頁面主要標題、LOGO 等</p></h1>
  </header>
 <!--nav--> 
  <nav>
    < nav ><p>此網頁的導覽區塊</p>
    <ul>
    </ul>
  </nav>
  <article>
    < article ><p>內容區</p>
    <section>< section ><p>網頁內容的區塊-1</p></section>
  </article>
  <aside>
    < aside ><p>側邊欄位可放置額外資訊、相關連結等</p>
  </aside>
 <!--footer-->
  <footer>
    < footer ><p>頁腳處,可在此聲明版權、使用規範等等</p>
  </footer>
</body>
</html>  
                        

HTML5新增元素目錄:

  1. HTML5的7個內容模組Content Models
  2. header,nav與footer元素
  3. article,section與aside元素
  4. audio影片嵌入元素
  5. video影片嵌入元素
  6. progress載入進度顯示條






🔑不要錯過延伸閱讀:

前端工程師的必上HTML5基礎課程(5)六個元素排版-下

前端工程師的必上HTML5基礎課程(2)載入進度顯示條

前端工程師的必上HTML5基礎課程(3)教你嵌入影片

十大程式語言排行,想學最強程式語言找達內教育就對了!!

從UI課程開始你新的一年!增加新技能,機會找上門! 

緊來看熱度第二的Java 課程

達內教育開幕 培養台灣IT人才進入全球企業

  

這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

網頁前端CSS必學兩屬性:display與visible