HTML element 的基本介紹

HTML element 中文可以翻譯為 HTML 元素或元件,簡單來說就是 HTML 網頁內的各種不同功能,普遍來說是用標籤(tag)的語法來呈現,例如負責顯示網頁標題的 title element、負責顯示網頁主體內文的 body element、顯示文字的 font element 都是,這些 HTML elements 有著標準的語法規則(syntax rule),如果要把 HTML 的基礎打好,這些基本的 HTML elements 都要仔細學會,這裡舉個簡單的例子。
HTML element example
這是一個標準的 H1 網頁標頭 element 的語法,由開頭標籤與結尾標籤包含住一段字串,絕大多數的 HTML elements 都是這樣的規則,僅有少部份的 elements 不需要結尾標籤,例如用來顯示圖片的 img tag 或顯示換行的 br tag。

我們這裡稍微整理一些常用到的 HTML elements 給各位參考。
elements用途描述
html
宣告一個 HTML 網頁
title顯示網頁標題
meta宣告網頁基本資訊,包含網頁的關鍵字、內容描述、網頁作者與版權宣告
link用來嵌入外部檔案到網頁內使用
style
宣告一段 CSS 樣式
body網頁顯示內容主體
font文字
h1~h6
網頁標頭
b
粗體字
strong
粗體字
img
圖片標籤,用來顯示網頁圖片
span
區域標籤
div
區塊標籤
TABLE表格
Form表單
以上是一些常用的 HTML elements,當然遠遠不僅於此,每一種不同的 HTML element 都有各自不同的功能與用途,真的要仔細學會還是需要花一點點時間的。

HTML elements 內可以包含其它的 elements

這一點就相當利害,同一組 element 內可以加入其它的 elements,這也是 HTML 的基本特性,舉例來說,head 標籤內就經常包含了 title 標籤、meta 標籤、style 標籤或是 link 標籤,body 標籤內又幾乎可以包含所有要顯示的 elements,如 font、span、div、imgTABLEForm ...  等,舉個簡單的例子給各位看看。
從這個很基本的範例可以看到最外層的 html element 就包含了 head, title, body 等標籤,head 內又包含了 title 標籤,這就是所謂的 HTML element 內還可以包含其它的 elements,正因為這樣的彈性,才能讓我們設計出各式各樣不同風格與內容的網頁,今天的 HTML elements 簡介您學會了嗎?

延伸閱讀
參考資料
  1. Wibibi en: HTML Elements description
分享於 2016-02-01 - 更新於 2017-08-03