close
之前介紹過HTML5的排版元素了,以為這樣就結束了嗎?沒那麼簡單,接下來我們還要來看另外三個!!
為什麼 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新增元素目錄： |
推薦閱讀:
文章標籤
全站熱搜
留言列表
