15個常用的HTML標籤與屬性基本介紹 - 自學成功道

標題

到圖片超連結有序清單無序清單空格註解區塊元素行內元素常見的6個語意標籤標籤屬性介紹HTML書籍推薦網頁美編的救星！零基礎也能看得懂的HTML&CSS網頁設計設計師一定要學的HTML5‧CSS3網頁設計手冊：零基礎也能看得懂、學得會 HTML標籤基礎知識 HTML標籤相當的多，不需要強求自己全部的標籤馬上要熟記在心，新手階段先學會常見的標籤，知道常見的標籤怎麼使用，對你的幫助會比因為要強記全部的標籤而失去學習的興趣來的多。

這裡我們主要介紹使用在範圍內的標籤，這個範圍的內容就是瀏覽器呈現給你看的網頁內容。

大多數的標籤都有開頭(opening)與結尾(closing)，例如代表開頭，代表結尾，你要呈現的文字則放在開頭與結尾標籤中間，記得一定要打上結尾標籤喔。

少部分的標籤不須結尾，例如，就不必打結尾標籤了。

簡要的瞭解HTML基礎知識後，在探討HTML常見標籤前，我們來把學習HTML與你日常有的經驗作個連結，讓你在運用各種標籤時，更有概念。

請先假想你現在要寫一篇文章，可能是學校的作文作業、公司的工作報告或是你自己珍藏的旅行日記，文章中會有標題、段落、圖片，你會怎麼做呢?你可能會，拿出一張白紙、新建一個檔案或是在日記本的空白頁，寫下文章的標題，接著開始內文，建立一個一個的段落，有需要的地方，你還可以放上圖片、相片。

建立網頁的時候也是用相似的邏輯，如果你要下大標題，使用標籤，瀏覽器就會幫你以標題的模樣呈現出來；寫內文段落，使用標籤，便是代表內文段落；想要加上漂亮的圖片、相片，你可以使用標籤，便可以在你的網頁上放上圖片了。

這些標籤讓你覺得很陌生?那是因為你沒有去理解他使用的英文單字，各標籤中的英文都有他字面上的意思，當你知道是什麼意思後，就會好像在使用中文書寫一樣，得心應手了。

馬上來看看如何使用這些常見的HTML標籤! 15個常見的HTML標籤 段落文字 標籤是呈現網頁段落文字的標籤，文字段落大多都使用這個標籤，所以你在的網頁原始碼中，會看到許多的標籤，以讓瀏覽器呈現出各個段落文字在網頁上。

為什麼使用p來代表段落文字?是來自於paragraph這個單字，以第一個字母p來代表。

下方區塊，HTML原始碼寫在左邊，呈現出的網頁文字就如右方Result結果，標籤將他所包覆的文字呈現在網頁上。

(使用手機閱讀的朋友，或未看到原始碼所呈現在網頁的成果，請點選Result按鈕觀看) SeethePen 圖片byOry(@SLSuccess) onCodePen. 標題到 代表標題的標籤有六個，分別從、依序到，代表這個網頁中主要標題。

就像是文章的題目、一份工作報告的標題，都只會有一個，所以網頁的建議只用1次，瀏覽器與搜尋引擎才會知道你的主要標題是什麼，有利於搜尋引擎優化(SEO)。

、到代表各個小標題，依照文章的層級，你可以依序列出各個小標，數字越大代表層級越低，h6就是最低的層級，h1是最大的標題，當然大標題字體就比較大，小標字體相對小。

SeethePen 標題byOry(@SLSuccess) onCodePen. 為什麼使用h來代表標題呢?主要是使用標題的英文heading來表示，取單字的第一個字母h作為標題的標籤。

圖片 想在網頁放上圖片，你可以使用標籤，這個標籤不需要開頭與結尾標籤，單獨一個標籤即可，我們稱這樣的標籤為空元素(emptyelement)。

換句話說，他不像段落文字標籤，需要開頭與結尾這樣成對的包覆規則，只需要單獨一個標籤就可以發揮功能了。

標籤的使用上，主要在使用標籤的屬性(attributes)，屬性包括圖片檔案來源src、圖片替代文字alt、高度height、寬度width。

例如你要在網頁放上一張小狗的圖片，你的HTML可以這麼寫: 下雨吧，別再缺水了，一起來祈雨吧! 呈現出的網頁內容會是下圖這樣: img其實就是圖片的英文單字image之意，取這個單字的前三個字母代表。

同樣的，屬性名稱src就是來源檔案的意思sourcefile，alt是alternativetext替代文字，height與width則是高度與寬度的英文。

需要特別留意，src屬性的值必須有圖片的副檔名，這邊的例子就是.jpg，如果沒有副檔名圖片無法顯示。

常見的圖片附檔名包括: .jpeg靜態影像壓縮格式的圖片，由聯合圖像專家小組(JointPhotographicExpertsGroup)，與jpg是一樣的意思，只是早期副檔名只能三個字母，所以只取jpg。

雖有圖片失真的缺點，但因為檔案小的特性，有利於網頁傳輸，是很常見的網頁圖片格式。

.png可攜式網路圖形(PortableNetworkGraphics)，圖片品質比.jpeg好，但檔案較大，可有透明底圖，常用於logo圖片。

.gif圖像互換格式(GraphicsInterchangeFormat)，可以插入多個影格產生動畫效果。

.svg可縮放向量圖形(ScalableVectorGraphics)，向量圖的特性就是縮放不失真。

標籤的屬性可能讓你覺得有點複雜，但仔細拆解，其實就是將屬性名稱加上等號，要添加的屬性則填入引號內，不同屬性空一格表示。

屬性可以選擇性的添加，依照你的需要為標籤添加屬性，當然如果像是這類標籤，你一定得有src屬性，才可以添加上圖片。

屬性名稱="要給屬性的值" 選擇性的添加屬性是什麼意思呢?以前面的小狗圖片例子來說，你只想填寫檔案來源、替代文字，以及圖片高度，寬度你不想設定，如此一來，瀏覽器就會按照原本的圖面比例，幫你調整圖片寬度。

圖片等比例放大了一些 超連結 標籤是錨anchor的縮寫，主要使用屬性href來展現功能，href是hypertextreference的縮寫。

SeethePen byOry(@SLSuccess) onCodePen. 以上面的HTML為例，你點選「我是超連結」後，網頁就會轉跳到你在href屬性所設定的位置或網址。

標籤除了href這個屬性外，還有一個很常用的屬性是target，將屬性的值設為_blank，就可以讓你的超連結自動開新分頁，而不是預設的直接覆蓋掉原本的網頁。

標籤的內容不僅可以是文字，也可以是圖片，若你想建立一個圖片的超連結，直接將文字替換為標籤就可以了。

如果你對超連結(hyperlink)字面意思感到困惑，其實就是一個連結，連結到你指定的地方，只是這個連結是在HyperText中，所以加了個「超」字。

還記得HTML的單字縮寫嗎?HTML的是HyperTextMarkupLanguage的縮寫，其中的HyperText就是超文字，也有人翻譯為超文本，都是HyperText的意思。

其實超連結相當常見，任何一個網頁你點了某個圖片、文字，會跳出另一個頁面、轉跳到網頁的特定位置，都是超連結的呈現。

有序清單 想在在網頁列上有順序性的清單，使用標籤，ol是orderedlist有序清單的英文字母，各取單字的第一個字母形成的。

實際的清單內容，則填在標籤中，li是來自list清單這個英文單字。

SeethePen 有序清單byOry(@SLSuccess) onCodePen. 標籤中還可以再放入其他標籤，事很常見的用法，標籤可以一層一層的堆疊起來，展現出不同網頁內容。

這邊我們看到標籤內還放了標籤，瀏覽器看到便知道在網頁上呈現有序標籤，便會幫標籤的內容加上1、2、3的順序。

無序清單 當你想在網頁上呈現沒有順序性的清單，可以使用標籤，同樣的，實際的清單內容同樣是使用標籤來呈現。

SeethePen 無序清單byOry(@SLSuccess) onCodePen. ul是unorderedlist無序清單的英文字母，各取單字的第一個字母而形成；unordered是ordered的前面加上un字首，un字首代表「沒有、不」的意思，所以ordered加上un，就從原本的有順序的意思，變為unordered無順序的了。

標籤常用於選單中，你平常瀏覽的網頁有許多下拉式的選項便是使用標籤製作出來的。

空格 標籤的功用是空一行(alinebreak)，br取自break的前兩個字母。

break的英文意思有打破的意思，也有休息的意思，這邊是休息一行的意思，所以網頁中會空一行。

註解 前面所提到的各種標籤都會顯示在網頁上，但如果你在編寫HTML時想在某個地方做個小筆記，提醒自己或其他人，這邊有什麼注意事項，你可以使用註解標籤。

你在中所填入的文字，瀏覽器將不會把這些文字顯示在網頁上。

使用Ctrl+/(windows系統)或command+/(macOS系統)就可以在編輯器快速打出註解的符號。

區塊元素 HTML是網頁的骨架，架構出來後，再用CSS來對網頁進行美化，而當你要美化網站時，你希望某個段落的一兩個字可以變為橘紅色，又或者某幾個段落文字要有背景顏色或邊框，你需要框選出一個範圍，和標籤便可以很明確的劃定位置。

在了解和這兩個標籤前，有個小觀念需要知道一下，就是區塊(block)與行內(inline)的概念。

區塊(block)呈現在網頁上是會換行的內容，行內(inline)則會在同一行。

我們用前面標籤的例子來做個說明。

你希望為文字加上橘紅色背景，你可以在標籤外部包覆標籤，讓所包覆的內容形成一個區塊，你可以想像就像是在他包起來的範圍畫了一個框框。

接著在開頭標籤內，填入CSS的樣式。

div是division這個單字取前面三個字母來表示，division是區分的意思，標籤主要的功能就是在形成一個個的區塊，方便網頁排版美化，如果還不懂CSS沒關係，這裡你先理解的概念就好了。

簡單的看個的使用: SeethePen div的使用byOry(@SLSuccess) onCodePen. 行內元素 延續前面的標籤例子，如果你只想在「別再缺水了」這幾個字加上橘紅底色(#F9D9CA是色碼)，使用會發生什麼事呢? 被包覆的那幾個字換行了，因為它是一個區塊，會自己有換行顯示的功能，並且在div的區塊內顯示的指定的底色。

SeethePen div的區塊性質byOry(@SLSuccess) onCodePen. 如果你希望在行內劃分出一個小區域，並且不換行，你可以使用標籤。

是行內元素，不會換行，可以保持你希望維持的段落文字格式。

光看文字與圖片也許不好理解，試著打打看，你會更清楚區塊與行內是什麼概念。

下方的例子，成功的將被標籤包覆的文字加上底色，其他的文字維持現狀。

SeethePen span的使用byOry(@SLSuccess) onCodePen. 常見的6個語意標籤 語意(Semantic)標籤是HTML5新增的標籤，用於讓網頁結構更清楚，搜尋引擎可以更容易了解你的網頁。

語意標籤的用途與、類似，目的都在將內容劃分區域，只是、是沒有語意的。

這裡所指的語意是什麼意思呢?就例如，同樣是劃區一個區塊，你只知道是一個區塊，這個區塊在做什麼你可能還需要細看內容才知道，但劃分出來的區塊，你一眼就知道這是頁首的部分。

學習語意標籤很簡單，知道標籤的英文名代表什麼意思，在相對應的位置放上語意標籤，就可以讓開發者及搜尋引擎很快理解你的網頁架構，下圖就是語意標籤對照網頁架構的示意圖。

頁首導覽列nav是導覽、導航的英文navigation取前面三個字母主要內容區塊有主題性的區塊，基本上會有一個標題側邊欄頁尾 標籤屬性介紹 屬性(Attributes)是HTML標籤可以添加的額外資訊，讓標籤可以依照網頁開發者的需求，增加某些功能。

在前面介紹、標籤時有提到src、href、alt屬性，有些屬性只適用於特定的標籤，例如src就適用於標籤，href適用於標籤。

當然也有屬性是任何一種標籤都可以附加的，例如style屬性，用來添加CSS。

屬性必須於開頭標籤輸入，如果是只有單一標籤，就將屬性填入該標籤即可。

舉例來說，表示段落文字的標籤，需要開頭標籤與結尾標籤，屬性你就必須填在開頭標籤中。

下方原始碼你可以看到，style屬性是填在開頭標籤內。

SeethePen 屬性解說byOry(@SLSuccess) onCodePen. 屬性怎麼填呢?在標籤的代表字母後空一格，接者依序填上屬性名稱、等號、雙引號，雙引號中填入你需要的屬性值。

屬性名稱="屬性的值" 以style屬性來舉例，color代表文字的顏色，冒號之後填入顏色(可以是色碼、顏色、RGB)，如此一來就可以添加文字的顏色。

遇到像是這類的屬於空元素的標籤，不需要結尾標籤，直接將屬性填入標籤中即可。

以上便是常用的HTML標籤與屬性的概念介紹，HTML就是由許多不同功能的標籤所組成，標籤中可以添加屬性，為每個標籤增添額外的資訊。

屬性都會放在開頭標籤中，閱讀HTML先看懂標籤的功能，在細看開頭標籤中的屬性。

HTML書籍推薦 閱讀本文後，希望可以再多瞭解HTML，加深概念與理解嗎?以下幾本書推薦給已經走在學習路上的你，作者們都使用了精美的圖案與範例，以及舒適的配色，讓你在舒適的情境中學習HTML，來看看是哪幾本書吧。

網頁美編的救星！零基礎也能看得懂的HTML&CSS網頁設計 《網頁美編的救星！零基礎也能看得懂的HTML&CSS網頁設計》是日本的網頁設計師為初學者寫的教學書籍，作者Mana的網站「Webクリエイターボックス」獲得日本「AlphaBlogger」（最有影響力部落格）大獎，並致力於網頁製作的教學，讓更多人可以更容易學會HTML、CSS等網頁設計的技能。

除了淺顯易懂，幫助讀者易於學習吸收，漂亮的美編也是本書的特色，讓你不知不覺地想翻開下一頁，學會各類語法及網頁設計的迷人魔法。

這本榮登日本亞馬遜、丸善、淳久堂、蔦屋書店「網頁設計書」銷售冠軍的學習書推薦給你。

閱讀本書 設計師一定要學的HTML5‧CSS3網頁設計手冊：零基礎也能看得懂、學得會 《設計師一定要學的HTML5‧CSS3網頁設計手冊：零基礎也能看得懂、學得會》就是要寫給沒有程式基礎的初學者、準網頁設計師。

書中一樣運用大量的圖片、彩色表格來講解HTML、CSS的觀念，看到HTML5、CSS3請不用緊張，後頭的數字只是表明版本，這是一本適合看到HTML就有點緊張的初學者的入門書，書中運用各類色彩來對程式碼進行區隔，降低新手陷入一堆文字的不適感，讓你可以舒適的閱讀學習，推薦給還在新手村的初學者。

閱讀本書 以上就是15個基礎HTML的標籤介紹及書籍推薦，分享給正在學習HTML的朋友們，希望可以幫助你學會靈活自如的運用HTML。

延伸閱讀: 4個步驟認識CSS基礎操作與選擇器 CSS組合選擇器：5個選擇器符號功用介紹 CSS權重(specificity)：熟悉這6個樣式級別，讓你的樣式被採用 Python爬蟲必備的HTML概念，5個要點認識網頁的基本結構 5本Python書推薦，強化你的程式語言觀念 12個入門Python線上課程：讓你快速學會寫程式 學Python可以做什麼：9個Python應用報你知 Python觀念，從=開始 文章導覽 ←Previous文章Next文章→ LeaveaCommentCancelReply發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*Typehere..Name* Email* Website 在瀏覽器中儲存顯示名稱、電子郵件地址及個人網站網址，以供下次發佈留言時使用。

搜尋站內文章 Searchfor: 近期文章 Python基礎觀念教學課程，一步一步帶你理解程式碼怎麼運作 總是學不會?1堂教你如何學習的課程，讓你不再跟腦袋作對 CSS繼承(inheritance):1個可能被你忽略的重要觀念 CSSTransition屬性的4個操作 2個要點了解CSS圓角屬性border-radius操作 課程推薦 好書推薦成功，從聚焦一件事開始 架站主機推薦