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

Elements & Sematics

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

  1. 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/
  1. Hyperlinks
  1. Relative & Absolute Paths
    <!-- Relative Path -->

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

<!-- Absolute Path -->

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

  1. 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.

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

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

  1. HTML5 Structural Elements
  1. 完全語義化結構:
  2. Header:  不是head,也不是headings。網頁介紹
  3. Navigation: block level, 主要的導航links 網站的導覽bar,次專區的導覽bar,文件導覽bar都可以使用。最常看到的錯誤就是再ul li 外面都包上一層 nav
    有些地方不能用nav 請注意:
  1. Article:  block level, 完整獨立的內容
  2. Section: block level, 不是 div 一段有意義的話, section 會有自己的標題
  3. Aside:block level, 不是只有sidebar 才可以用 aside,跟主文無相關都可以放在 aside
  4. Footer:block level,
  1. D.R.Y (Don’t Repeat Yourself)