HTML5 語意

HTML5 簡化了DOCTYPE 、 META 宣告、CSS 跟 JS 引入的 type宣告
變得不用去記一些記不住的東西

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="xxxx.css">
<script src="xxx.js"> 

要用 HTML5 之前 必須瞭解到 IE9 以前的 IE 版本並不支援 HTML5
所以必須用 html5shiv 來補這部分
https://code.google.com/p/html5shiv/

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

加上這段 code 就可以相容於 IE9 以前的版本了!
然後使用 HTML5 的reset-stylesheet 初始化元素樣式
http://html5doctor.com/html-5-reset-stylesheet/
或是使用 Nomarlize.css

再來進到主題
<header>, <footer>, <article>, <aside>, <nav> , <section> 等等標籤就是語意的重點

以往會習慣用

<div class="header">

HTML5 裡面直接使用

<header>

這個圖明顯的能看出整個架構

HTML5

(圖出處:網路集客力)

下面介紹 HTML5 標簽的用法

<header>

可以用在多處
只要是文件、文章的標題
通常會包含 hgroup元素 h1~h6 在裡面
也可以用來包搜尋欄、LOGO、main nav

<header>
  <img src="logo.png" />
  <nav>
    <ul>
      <li><a href="#">標簽1</a></li>
      <li><a href="#">標簽2</a</li>
      <li><a href="#">標簽3</a></li>
    </ul>
  </nav>
</header>

<footer>

一般網站拿來置底的部分
包括網站或是區塊的底部一樣可以用在多處

<footer>
  <p>2013/11/2 By Chentsu Lin</p>
</footer>

<nav>

適合用在網站的導覽上
諸如分頁標記、外部連結、目錄都不該用 <nav>

<nav>
  <ul>
    <li><a href="#">標簽1</a></li>
    <li><a href="#">標簽2</a</li> 
    <li><a href="#">標簽3</a></li> 
  </ul>
</nav>

<aside>

對了解現在的文章沒有影響的大多可以用 aside
包括廣告、側欄等等

<aside>
  <p>這是一些次級資訊</p>
</aside>

<article>

脫離出來也是一個完整內容的時候使用

<article>
  <h2>artic1e1</h2>
  <p>.................</p>
</article>

<section>

把相關內容包在一起的一個區塊

<section>
  <article>
    <h2>artic1e1</h2>
    <p>.................</p>
  </article>
  <article>
    <h2>article2</h2>
    <p>.................</p>
  </article>
  <article>
    <h2>article3</h2>
    <p>.................</p>
  </article>
</section>

<main>

置放網站主要內容的區塊

<main>
<!-- 主要內容 -->
</main>

<figure> / <figcaption>

圖片相關的一個獨立區塊 / 圖片相關的敘述

<figure>
  <img src="pic1" alt="pic" />
  <figcaption>這就是傳說中的 pic 1</figcaption>
</figure>

<time>

用來標記時間
內容必須是 mm/dd/yyyy
不然就必須用 datetime 屬性來額外標示 value

<time datetime="2013-09-16">09/16/2013</time>

還有幾個以往沒有語意的標簽也多了語義

<i>

不同的聲音或想法
例子:分類標示、科技詞彙、別的語言的慣用語、音譯、心中想法、船名

<p><i>HTML5 is so easy</i>, he thought.</p>

<b>

文體的轉變
例子:關鍵字、產品名稱、互動文字、文章開頭

<p><b class="lead">The course gets start this upcoming Monday, and over 3,000 students have already registered.</b></p>

<em>

表示特別強調

<p>Make sure to buy the cake <em>before</em> the day of her birthday,November 2, 2013.</p>

<strong>

表示非常重要

<p>Make sure to buy the cake <em>before</em> the day of her birthday, <strong>November 2, 2013</strong>.</p>

最後
沒有語意要拿來 styling 或是 hook 的地方一律使用 <div>

加上 HTML5 語意的重點是 SEO
可以幫助搜尋引擎理解網站的內容

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s