【自學程式】什麼是HTML標籤？初學網頁開法必備的四個HTML標籤
2021/06/07閱讀時間約 6 分鐘
HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。
它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
由於結果會跟著瀏覽器顯示出來，相較於其他程式語言，HTML不會很抽象難懂，就算寫錯了，也非常好透過瀏覽器除錯。
什麼是HTML標籤？
每一種程式語言，都會有自己獨特的語法（syntax），藉由熟悉程式的語法我們可以跟不同的載具、軟體及其他程式語言做溝通。
而HTML的語法，主要是由HTML標籤（HTML Tag）所組成，一個標籤通常會由一組小括弧<>及在小括弧裡頭放入一小段語意單字。
通常標籤都是成對的出現，只要將要呈現在網站上的文字內容，用起始標籤（Opening Tag）及結尾標籤（Closing Tag）包起來，通常結尾標籤會比起始標籤多了一個「/」符號作為區分。
舉例來說，如果我想要建立一個標題我會（請點開程式碼閱讀）：
在範例中，我使用了<h1>標籤及其結尾標籤</h1>，並把我想要的內容放到中間，一個段落就可以很簡單的透過HTML建立出來了。
最常用的這四種標籤
在還沒有打開一個網頁前，我們幾乎可以預測到裡面可能會有怎麼樣的內容，像是宣傳的圖片、文章、文章的標題、文章的段落等，其實這些常見的網頁內容，都可以透過HTML標籤建立出來。
以下我將舉四個常見的HTML標籤做示範，他們分別是：
- <h1>
- <p>
- <a>
- <img>
使用<h1>建立網頁標題
建立網站的內容，就跟寫作一樣，需要有起承轉合，也需要能幫助讀者釐清閱讀內容的「標題」。
在HTML中，有一系列專門建立標題的HTML標籤，他們通常以h開頭，從文字大小由大至小分別為<h1><h2><h3><h4><h5><h6>
在建立一個標題時，我們可以使用該標籤的起始標籤及結尾標籤將文字包住，就可以建立出我們想要大小的標題了。
使用<p>建立網頁段落
建立好標題後，我們可以使用<p>標籤來建立文章段落，一組<p></p>就代表完整的一個段落，如果想要另起新的段落的話，我們就會使用第二組的<p></p>標籤：
使用<a>建立超連結
說完了<h1>及<p>標籤，大家現在對於HTML標籤就有了初步的認識，但要靠著這兩個標籤就想要排版出一段文章是不可能，所以接下來我就要介紹另外一個常常在網頁中看到的HTML標籤：a連結。
<a>連結與<h1>及<p>標籤一樣，都是成對的出現，並在其中放入我們想要的內容，但我們常見的超連結，除了會顯示連結的名稱外，點擊後來會連到其他網頁，這是怎麼做到的呢？
透過程式碼，我們可以看到<a>標籤與<h1>及<p>標籤有些不同，在<a>起始標籤的部分多了一段href="www.google.com"的文字。
在這裡只要先知道，在href=” ”的引號中，填入我們想要連結的網址，並一樣將顯呈現的文字內容填入成對的標籤內，就可以打造出超連結的效果。
通常我們並不會單一個<a>標籤自己存在使用，而是有可能與<p>段落混用，在一些特定的文字上加入連結，創造一些行銷的網頁效果。
從範例程式碼當中，我們可以了解到HTML標籤是可以被堆疊的，在一組標籤中，還可以建立出例外一組標籤，但使用時必須注意，這些標籤必須成對出現，不然就會出錯。
使用<img>建立圖片
學習<a>連結標籤後，我們接著要了解一個少數在HTML這個語言中，不成對的HTML標籤<img>。
透過<img>標籤我們可以很輕鬆的建立出一張圖片，從範例中我們可以看到，它只需要自己一個獨立標籤就能創造出效果，而不需要結尾標籤。
<img>除了是不成對的標籤外，他也有與文字標籤或是<a>標籤不同的屬性，分別為<src>及<alt>，兩個的意思分別為sourcs及alternative description，代表著圖片的來源及替代敘述。
我們可以在src=” ”中填入圖片網址，或是圖片在本機電腦的位置，就可以在瀏覽器當中呈現圖片了。
而alt=” ”的作用在於，圖片有時候可能會因為各種原因，像是網路不好、圖片連結失效而導致圖片失效，這時候在alt=” ”中填入替代文字，就可以在文字失效時帶入替代圖片出現的文字。
另外一個alt的作用在於，世界上有許多因視障而不良於使用網站的用戶，這些用戶可以使用特別的軟體，將網站內的內容讀出來，但因為圖片並不是文字，沒有辦法被讀取到，我們就必須加上alt裡的替代文字，創造無障礙的網站環境。
在初學網頁開發時，很多人都會偷懶不填alt裡的值，但其實這是網頁開發的大忌，因為沒有人可以完全保證這張圖片可以被另外一端的使用者看到，甚至可能會帶有歧視視障者的意味。
在今天章節當中，主要是要讓大家對於HTML標籤有初步的認識，後續會跟大家分享更多有關HTML標籤的基礎知識，請大家敬請期待！
關於網頁技術的問題，歡迎你下方留言跟我討論與交流：）
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
也許你會對這個有興趣：
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：[email protected]
384會員
92內容數
留言0
查看全部
