Miles' Blog

天涯何處無幹話,何必要講實務話

HTML

標籤參考:

Coding Style 參考:

Tag

標籤參考:

語意標籤

Tag Description Reference
header 網頁的頂部,網頁最重要形象和資訊都會放在這裡,如 logo、網站名詞等 MDN
nav 網站的導航連結或選單 MDN
aside 直譯是「旁白」,表示文章以外的內容,通常用在文章內容側欄
article 網頁可以有很多文章(如 blog),這時可以用 article 區分文章內容 MDN
section 文章內的章節或小段落,通常會有一個 heading MDN
footer 網頁的底部,通常是作者相關資訊,如著作權、作者名、使用什麼引擎等 MDN

用語音標籤的好處是,看標籤就知道該內容應該會是什麼功能,在查看和維護會變得更容易。

另外在 SEO 也是會有幫助的

<dl><dt><dd>

通常用在定義或是名詞解釋等。

  • dl Definition List,清單
  • dt Definition Term,項目
  • dd Definition Description,描述

一個 dl 裡面,會有很多組 dt + dd,dt + dd 是一組一組的搭配,dd 會自動產生縮排的效果。

與 li 不同的是,它預設 dd 就會自動縮排,而 li 需要再包一層 ul 才行。所以單純的項目列表還是用 li 會比較明確,而一個主項目和一個單行描述的組合,用 dl 會比較合適。

<label>

設定 form 元件的標示,可用文字或圖片。一個標示可以指定一個 input,當 user 點擊 label 的時候,就等同點擊 input。

Attributes:

Attribute Value Description Example Remark
for input id 設定該 label 所指定的 input <lable for="text">Text</lable>
form form id 設定指定的 form id,有多個的話可以用空格分隔 HTML5 新增

<a>

無作用連結的做法:

<a href="javascript: void(0)">連結</a> 

另解

<a href="#">連結</a> 

參考

0%