HTML是什麼？HTML基礎應用與解說｜天矽科技客製化網頁設計

HTML (Hyper Text Markup Language) 超文本標記語言，一種建立網頁的標準標記語言，用來組織架構並呈現網頁內容的程式語言，常與CSS與JavaScript一起使用在網頁設計上 ... 天矽部落格最新的網路趨勢資訊 網站設計趨勢 All 客製化網頁設計 RWD網頁設計 上市上櫃詳細說 網路趨勢 資源分享 網站建置與SEO 數位轉型案例分享 天矽科技專欄 HTML是什麼？HTML基礎應用與解說｜天矽科技客製化網頁設計   HTML就是超文本標記語言，用來建立網站的標準語言，將資訊結構化讓內容變得有意義。

HTML是什麼 HTML(HyperTextMarkupLanguage)超文本標記語言，一種建立網頁的標準標記語言，用來組織架構並呈現網頁內容的程式語言，常與CSS與JavaScript一起使用在網頁設計上。

(CSS：用於美化HTML/JavaScript：用於增加網頁互動性)   HTML是SGML(StandardGeneralizedMarkupLanguage)標準通用標記式語言的延伸，由於較為複雜，難以普及，因此衍伸出了SGML的應用HTML以及為了簡化它的子集XML，以便於更加通用。

  HTML由W3C(WorldWideWebConsortium)全球資訊網聯盟與WHATWG(WebHypertextApplicationTechnologyWorkingGroup)網頁超文字應用技術工作小組共同開發，最初始的版本可追朔到1993年。

  HTML將這些資訊結構化，如標題、段落、列表，都可以在一定程度上描述文件意義，語言形式為＜html＞。

  資料來源：維基百科   HTML組成的網站架構 ＜!DOCTYPEhtml＞—文件類型 (見上方圖片第一行灰色字) 在一份標準的HTML文件中，第一行都會有，DOCTYPE是DocumentType的簡寫，用來告訴瀏覽器說，這是以HTML標記語言所撰寫的文件，請用HTML的定義解讀的意思，有點像是自動校正的功能。

  ＜html＞…＜/html＞—＜html＞元素 (見上方圖片第二行) 大多元素編寫都是一個開始標記＜html＞和一個結束標記＜/html＞，兩者中間為其內容。

元素則包含了所有顯示在這個頁面上的內容。

  ＜head＞…＜/head＞—＜head＞元素 (見上方圖片第三行) 裡面放的是網站重要資訊，但不會讓瀏覽者看到，如：搜尋結果關鍵字、頁面說明、CSS…等。

如圖   承上圖 ＜title＞…＜/title＞中間就是網頁標題 ＜metacharset="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＞ 無順序性清單(Unorderedlists)：用於清單、項目。

有順序性清單(Orderedlists)：用於步驟、流程介紹。

如： ＜p＞這是一段文字要介紹下方列表＜/p＞ ＜ol＞ 　　＜li＞第一步＜/li＞ 　　＜li＞第二步＜/li＞ 　　＜li＞第三步＜/li＞ ＜/ol＞ ＜p＞以上步驟就是這麼簡單＜/p＞   連結(link) 網頁之中一定會有許多需要加上連結的地方，這樣我們就需要使用＜a＞這個元素，a代表anchor，錨點的意思。

如： ＜ahref="https://www.超連結加在這裡.com"＞連結文字顯示＜/a＞ 前台顯示就會長這樣： 連結文字顯示 ※htef=hypertextreference超文本鏈接，在HTML中定義交叉引用關係。

  圖片(image) 圖片元素是直接把圖檔嵌在HTML網頁上，透過圖片來源(src)屬性，提供連到圖片檔案的路徑，也就是說要先將圖片上傳到網站後台產生圖片路徑網址，再將網址提供給這段語法。

我們也可以加上alt(alternative)這個屬性，就是圖片的說明文字，一方面讓這張圖片可以上關鍵字搜尋，另一方面提供視障者瀏覽網頁時利用文字來了解網頁圖片要呈現的內容，若圖片出錯還能顯示圖片文字。

如： ＜imgsrc="圖片檔案位置"alt="我的圖片名稱"＞   資料來源：MDNWebDocs   想更深入了解架設網站HTML的標準，可參考W3C發布的資訊：W3C發布資訊   天矽科技客製化網頁設計，架設網站皆依標準設計架構，有興趣歡迎與我們聯絡。

  回上一頁 Share 文章標籤 更多網路趨勢文章 GA4客層沒資料？開啟Google信號獲取資訊吧！天矽科技客製化網頁設計 Acunetix網頁弱點掃描，網站漏洞應立即修補｜天矽科技網頁設計 WAF防火牆是什麼？2021十大安全風險排行｜天矽科技網頁設計客製化 信箱 客服 Line@