http://learn.shayhowe.com/html-css/elements-semantics

Elements & Sematics

1. Semantics Overview
   語意化程式，可以描繪一個頁面的內容，不單純只是用在描述style。還可讓電腦、螢幕閱讀、搜尋引擎跟其他裝置瞭解你的網頁內容。更可以讓管理程式碼更容易，了解每一個區塊內容彼此之間的關係。

1. 語意化標籤帶來的好處

• HTML程式碼更短
• 維護更容易  只要更新 特定有意義的class就可以更新整個網站
• 讓維護者更容易了解 code
• 因為採用語意的設計，當你要做整體style改版的時候會更容易
• 採用語意後，將”設計”跟”內容”完全分開，即使不是設計專家也可以使用你設計的CSS新增跟修改頁面  
  

2. Divisions & Spans
   所有的 elements 不是 block level 就是 inline level，區別在於？

1. Block level: element 會在新的一行產生，預設整行的寬度，block level 的elements 可以巢狀的方式內嵌在另一個element 裡面，也可以在 inline level 的elements 裡面。
2. Inline level: 不會在新的一行產生， 接在既有 DOM element 的後方，預設element 在該區間應該有的寬度，inline level 的 element 不能巢狀的方式內嵌在 block level 的 elements 中，但他們可以接在 inline level 的element 中。

1. div 跟 span 在有 class 或是有 id 的情況可以附加 value，通常 id 跟 class 只是被用在增加所謂的 style 用來區分 div 跟 span 彼此的不同，但如果使用語義化的命名可以增加不同的意義。
   例如：下面 div 如果使用 orange 就限制住這個區塊的使用情境了。
   <!-- div -->

<div class="social">

<p>Lorem ipsum dolor sit amet...</p>

<p>Lorem ipsum dolor sit amet...</p>

</div>

<!-- span -->

<p>Lorem ipsum dolor sit amet, <span class="tooltip">consectetur</span> elit.</p>

3. Typography

1. 文字的展現意義 (第四章會再詳述)
2. Heading: block level 的 elements，有六個排版 h1~h6，可迅速的讓閱讀者瞭解頁面的內容結構，也可讓搜尋引擎辨別網頁的內容。
3. Paragraphs: 使用 p tag (block level)，切割文章段落
4. Bold Text With Strong: 使用 strong tag (inline level)
5. Italicize Text with Emphasis: em(inline level)
6. 瞭解 i, em, b, strong 的不同 http://html5doctor.com/i-b-em-strong-element/

• i: 斜體，大多用來表示另一種聲音，例如翻譯外來語、專有名詞，印刷斜體。
• em: 斜體，局部強調使用，略有不同的意義，強調的部份可能要用不同的發音或是有特殊的意義
• b: “stylistically offset” 粗體，文體上的改變，用在 keywords，意義上本本身沒有特別的意思。
• strong:  semantically used to demote text with a strong importance。粗體， 語義上特別需要關注的強調部份。
  

4. Hyperlinks

1. Relative & Absolute Paths
   <!-- Relative Path -->

<a href="/about.html">About</a>

<!-- Absolute Path -->

<a href="http://www.google.com/">Google</a>

2. Linking to an Email Address
   <a href="mailto:shay@awesome.com?subject=Still%20Awesome&body=This%20is%20awesome">Email Me</a>
   full mailto
   mailto:        to set the recipient, or recipients, separate with comma

&cc=        to set the CC recipient(s)

&bcc=        to set the BCC recipient(s)

&subject= to set the email subject, URL encode for longer sentences, so replace spaces with %20, etc.

&body= to set the body of the message, you can add entire sentences here, including line breaks. Line breaks should be converted to %0A.

3. Opening Links in a new Window
   <a href="http://shayhowe.com/" target="_blank">Shay Howe</a>
4. Linking to Elements within the Same Page
   <a href="#awesome">Awesome</a>

<div id="awesome">Awesome Section</div>

5. HTML5 Structural Elements

1. 完全語義化結構：
   
2. Header:  不是head，也不是headings。網頁介紹
3. Navigation: block level, 主要的導航links 網站的導覽bar，次專區的導覽bar，文件導覽bar都可以使用。最常看到的錯誤就是再ul li 外面都包上一層 nav
   有些地方不能用nav 請注意：

• 分頁標記
• Social Link
• Tag 跟 Categories

4. Article:  block level, 完整獨立的內容
5. Section: block level, 不是 div 一段有意義的話, section 會有自己的標題
6. Aside:block level, 不是只有sidebar 才可以用 aside，跟主文無相關都可以放在 aside
7. Footer:block level,
   

6. D.R.Y (Don’t Repeat Yourself)