HTML超文本標記語言
HTML是什麼？HTML基礎應用與解說｜天矽科技客製化網頁設計
HTML是什麼
HTML (Hyper Text Markup Language) 超文本標記語言，一種建立網頁的標準標記語言，用來組織架構並呈現網頁內容的程式語言，常與CSS與JavaScript一起使用在網頁設計上。(CSS：用於美化HTML/ JavaScript：用於增加網頁互動性)
HTML是SGML (Standard Generalized Markup Language) 標準通用標記式語言的延伸，由於較為複雜，難以普及，因此衍伸出了SGML的應用HTML以及為了簡化它的子集XML，以便於更加通用。
HTML由W3C (World Wide Web Consortium)全球資訊網聯盟與WHATWG (Web Hypertext Application Technology Working Group) 網頁超文字應用技術工作小組共同開發，最初始的版本可追朔到1993年。
HTML將這些資訊結構化，如標題、段落、列表，都可以在一定程度上描述文件意義，語言形式為＜html＞。
資料來源：維基百科
HTML組成的網站架構
＜!DOCTYPE html＞—文件類型
(見上方圖片第一行灰色字)
在一份標準的HTML文件中，第一行都會有，DOCTYPE是 Document Type的簡寫，用來告訴瀏覽器說，這是以HTML標記語言所撰寫的文件，請用HTML的定義解讀的意思，有點像是自動校正的功能。
＜html＞…＜/html＞ —＜html＞元素
(見上方圖片第二行)
大多元素編寫都是一個開始標記＜html＞和一個結束標記＜/html＞，兩者中間為其內容。
元素則包含了所有顯示在這個頁面上的內容。
＜head＞…＜/head＞ —＜head＞元素
(見上方圖片第三行)
裡面放的是網站重要資訊，但不會讓瀏覽者看到，如：搜尋結果關鍵字、頁面說明、CSS…等。如圖
承上圖
＜title＞… ＜/title＞中間就是網頁標題
＜meta charset="utf-8"＞用來指定網頁內容是用什麼編碼，現在大多數的網頁編碼都是utf-8，它可以幫助網頁免去許多文字無法呈現的問題。
文件標題(heading)
文件標題(heading)
這個標記可以讓網站呈現內容的主題，就像是書名、章節、小標題，從最重要開始，HTML最多可以有六層文件標題：＜h1＞＜h2＞＜h3＞＜h4＞＜h5＞＜h6＞，基本上大多網站最多只用到第四層。如：
＜h1＞這是天矽科技網頁製作的標題＜/h1＞
＜h2＞本文介紹HTML是什麼＜/h2＞
＜h3＞標記文字有哪些＜/h3＞
＜h4＞文件標題＜/h4＞
＜h1＞多用在標題、網頁大標…等，最多一個。
＜h2＞多用在副標、文章名稱…等，最多2~3個。
＜h3＞多用在產品名稱、文內標題…等，數量可以五個以上。
＜h4＞用在產品型號、文內標題下細項…等，數量沒有限制。
段落(paragraph)
一般文字呈現，最常用的就是＜p＞…＜/p＞，如：
＜p＞這是一段我想要說的話…＜/p＞
＜p＞承上面所說的…＜/p＞
清單(list)
清單包含兩個元素＜ul＞或＜ol＞加上＜li＞
- 無順序性清單(Unordered lists)：用於清單、項目。
- 有順序性清單(Ordered lists)：用於步驟、流程介紹。
如：
＜p＞這是一段文字要介紹下方列表＜/p＞
＜ol＞
＜li＞第一步＜/li＞
＜li＞第二步＜/li＞
＜li＞第三步＜/li＞
＜/ol＞
＜p＞以上步驟就是這麼簡單＜/p＞
連結(link
網頁之中一定會有許多需要加上連結的地方，這樣我們就需要使用＜a＞這個元素，a代表anchor，錨點的意思。如：
＜a href="https://www.超連結加在這裡.com "＞連結文字顯示＜/a＞
前台顯示就會長這樣：
※htef= hypertext reference 超文本鏈接，在HTML中定義交叉引用關係。
圖片(image)
圖片元素是直接把圖檔嵌在HTML網頁上，透過圖片來源(src)屬性，提供連到圖片檔案的路徑，也就是說要先將圖片上傳到網站後台產生圖片路徑網址，再將網址提供給這段語法。
我們也可以加上alt (alternative)這個屬性，就是圖片的說明文字，一方面讓這張圖片可以上關鍵字搜尋，另一方面提供視障者瀏覽網頁時利用文字來了解網頁圖片要呈現的內容，若圖片出錯還能顯示圖片文字。
如：
＜img src="圖片檔案位置" alt="我的圖片名稱"＞
資料來源：MDN Web Docs
想更深入了解架設網站HTML的標準，可參考W3C發布的資訊：W3C發布資訊
天矽科技客製化網頁設計，架設網站皆依標準設計架構，有興趣歡迎與我們聯絡。
