在寫html需要注意的事

本篇主要整理過去當助教期間碰過的詢問以及個人也曾犯過的錯

標籤語意化、標題標籤順序性、h1標籤的唯一性、列表標籤的正確使用方式、你所忽略的 alt 屬性、type 屬性的重要、寫好 head 標籤

標籤語意化

什麼是標籤語意化 ( Semantic Elements )

指使用特定 HTML 標籤來結構化網頁內容，而不是僅僅使用無語意的標籤像是 <div> <span> 標籤。

這些語意化標籤能夠清晰地描述網頁內容和用途，幫助開發者和搜索引擎更易於理解，同時也有助於提升 SEO ( Search Engine Optimization )，並確保網頁結構清晰。

要寫出語意化標籤，首先就是需要正確的使用標籤

例如：

應該使用 <header> 來表示網頁的表頭
使用 <main> 來表示網頁的主要內容
使用 <footer> 表示網頁的表尾
使用 <nav> 來撰寫導覽列
使用 <article> 來表示獨立完整的內容區塊
使用 <section> 來表示通用獨立區塊
列表結構應該使用 <ul> <li>
內文應該使用 <p>
標題應該使用 <h1> <h2> <h3> 等等的標題標籤

詳細可以參考 MDN HTML elements reference

標題標籤順序性

標題標籤具有順序性，在寫 HTML 時，標題標籤從 <h1> <h2> <h3> ... <h6> 主要用於定義內容的層級，其中 <h1> 標籤最為特別 ( 下面會說明 )

通常在寫 h 標籤時應該按照內容的層級順序來使用：
- 例如：能夠代表整個網頁核心的大標題 <h1>，主題性區塊的標題 <h2>，區塊中的小標題 <h3>，後續的標題標籤就是依照層級循序漸進使用即可。通常情況下，也比較少有使用到 <h4> 以下的需求。
避免跳級：
- 在使用標題標籤時，應避免跳過層級。例如，不應該在一個 <h2> 標籤之後略過 <h3> 直接使用 <h4> 標籤，而應該按照順序依次使用，保持內容結構的連貫性，也便搜索引擎理解網頁內容。

<h1> 標籤的唯一性

<h1> 標題標籤因為屬於最高層級，在所有標題標籤中具有最高的權重，甚至能夠影響到整個網頁的關鍵字排名

通常用於能代表整個網頁最核心的主要內容，由於最核心的內容只有一個，這也是唯一性的由來之一，例如：PChome 24h購物、巴哈商城，文章標題等等。

不過，偶爾也會發現，疑？某些網頁有多個 <h1> 標題標籤耶

那你如果問，<h1> 到底該寫一個還是多個比較好？

但其實這是一直都滿有爭議的問題，就是到底能不能寫多個 <h1> 標籤

根據搜索引擎最佳實踐和 SEO 專家的共識，意圖使用多個 <h1> 標籤來增加關鍵字排名是一種違反標準的做法，容易被搜尋引擎視為黑帽 SEO ( Black Hat SEO )，這可能導致網站的排名受到懲罰或降低。

但如果要討論這是否合法，其實現今一切合法，多個 <h1> 標籤並不會對 SEO 產生負面影響

該標準是基於 HTML4 的規格，但在 HTML5 後可以使用多個 <h1> 標籤，Google 的 SEO 專家 Joey Burzynski 也說到就算不使用，網站也依然可以排名。

最後他也被問到，一個網頁應該使用多少 <h1> 標籤，而他說：as many as you want.

詳細文章可以參考這邊 Are multiple H1 tags bad for SEO?

總之使用多少 <h1> 並不是重點，只要能夠清楚地描述網頁的結構那就是合理的。

列表標籤的正確使用方式

列表結構標籤通常用於需要呈現項目清單時，例如：導覽列、分類、多個相同結構的主題式列表皆可以使用。

另外也需要注意 <ul> 或 <ol> 內層只能是 <li>，否則這是一個不合法的規範。

常見的列表結構：

<ul> <li>

<ul>
  <li>product 1</li>
  <li>product 2</li>
  <li>product 3</li>
</ul>

<ol> <li>

<ol>
  <li>product 1</li>
  <li>product 2</li>
  <li>product 3</li>
</ol>

你所忽略的 alt 屬性

在 <img> 圖片標籤中 alt 屬性是必要的，主要用於當圖片無法正常顯示時，則會顯示 alt 替代文字代表圖片。

<img src="path/to/image.jpg" alt="描述圖片的替代文字">

最重要的是當爬蟲在爬取網頁資訊時，能夠透過 alt 屬性幫助理解圖片的內容，有助於 SEO。

另外，也能讓視障者可以透過閱讀器理解圖片的內容。

type 屬性的重要

type 屬性經常使用在 <input> 和 <button> 標籤，而兩者也有些微的差異。

<input> 的 type 屬性
- 能夠指定輸入的類型，這對瀏覽器和用戶的互動行為十分重要
  
  例如：輸入電話的欄位如果是使用 text，點選時能夠輸入任意的內容，但如果使用 tel，點選時能出現電話數字鍵盤直接輸入數字，從而提升使用者體驗。
  
  關於 <input> 的 type 屬性可以參考 MDN文件
<button> 的 type 屬性
- 主要定義按鈕的行為類型。
  
  例如：如果 type 屬性設定 submit 能夠用於表單的提交功能，如果只是做一般的按鈕，建議還是要設定 type 屬性為 button。
  
  關於 <button> 的 type 屬性可以參考 MDN文件

寫好 head 標籤

<head> 標籤用途主要是用來告訴搜尋引擎網站中有什麼內容，像是網站名稱、網站描述、關鍵字等等，以及其他 CDN 或 CSS 檔案

能夠幫助網站增加搜尋引擎的排名，對 SEO 相當重要！

範例：

<head>
  <!-- 編碼方式 -->
  <meta charset="UTF-8">
  <!-- 網頁縮放設定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 網頁標題 -->
  <title>AndyWang's Blog</title>
  <!-- 瀏覽器標籤條的 icon -->
  <link rel="shortcut icon" href="favicon.ico">
  <!-- 網頁的描述 -->
  <meta name='description' content='網頁描述文字' />
  <!-- 用於分享在社交媒體平台時預覽的資訊 -->
  <meta property="og:title" content="FB的標題" />
  <meta property="og:description" content="FB的描述">
  <meta property="og:type" content="website" />
  <meta property="og:url" content="FB上的網址" />
  <meta property="og:image" content="FB的圖片" />
  <!-- 推特分享時的卡片類型 -->
  <meta name="twitter:card" content="summary" />
  <!-- 設定IOS顯示的icon -->
  <link href="圖片路徑" rel="apple-touch-icon" />
  <!-- 匯入CSS -->
  <link rel="stylesheet" href="CSS檔案路徑">
</head>

在寫 HTML 需要注意的事