標籤的正確用途是什麼？

正確使用HTML標籤能提升結構清晰度、可讀性和SEO效果。 1.

<div>是塊級元素，適合佈局和包裹大段內容，而<span>是行內元素，用於小範圍文字控製或邏輯結構；常見錯誤包括在不該換行的地方使用<div>或濫用其佈局而忽略語義化標籤如<header>、<main>。 2.表單中應通過for屬性綁定<label>與<input>的id，以提升交互和無障礙體驗，或將<input>嵌套在<label>內省略屬性關聯。 3.必須寫alt屬性，用於替代顯示和無障礙訪問，裝飾性圖片可設空值但不可省略屬性；常見誤區包括用文件名或模糊描述代替具體語義。

HTML 標籤的正確使用，其實並不是什麼高深技術，但很多人在寫網頁的時候會忽略一些細節，導致結構混亂、可讀性差甚至影響SEO。想寫出規範又實用的HTML 頁面，了解常用標籤的作用和正確的用法是關鍵。

tag?" />

1. <div>和<code><span></span> ：塊級與行內容器的區別

<div>是一個塊級元素，默認情況下會獨占一行，適合用來包裹一大段內容或作為佈局容器；而<code><span></span>是行內元素，通常用於小範圍的文字樣式控製或者插入一小段邏輯結構。

比如你有一段文字，其中幾個詞需要特別處理：

tag?" />

 <p>這是一段普通的文字，其中<em>“某些詞語”</em>被強調了。 </p>

這裡如果只是加粗或者顏色變化，用<span>就夠了；但如果要單獨設置一個區塊，比如一段介紹信息，那更適合用<div>或更語義化的標籤如<section> 。

常見錯誤：

tag?" />

• 在不該換行的地方用了<div>
• 用<div>堆砌整個頁面結構，忽略了更有意義的標籤（如<header> 、 <main> 、 <footer> ）

2. 表單中的<label>和<input>關聯方式

很多人寫表單時直接放個<input> ，不加<label>或者隨便套個for 屬性，結果用戶點擊label 無法聚焦輸入框。正確的做法是通過for屬性綁定label 和input 的id：

 <label for="username">用戶名：</label>
<input type="text" id="username" name="username">

這樣不僅對鼠標用戶友好，也提升了屏幕閱讀器等輔助工具的體驗。

另外一個小技巧：
如果你把<input>放在<label>裡面，也可以不用寫for 和id：

 <label>
  記住我<input type="checkbox" name="remember">
</label>

這種方式雖然省事，但需要注意嵌套結構是否會影響樣式佈局。

3. 圖片標籤<img src="/static/imghw/default1.png" data-src="photo.jpg" class="lazy" alt="標籤的正確用途是什麼？" >必須帶alt屬性

<img src="/static/imghw/default1.png" data-src="photo.jpg" class="lazy" alt="<頁腳>標籤的正確用途是什麼？">中的alt屬性不是可選，而是必須寫。它有兩個重要作用：

• 當圖片加載失敗時顯示替代文字
• 提升網站無障礙訪問能力，方便屏幕閱讀器識別

如果你的圖片是純裝飾性的，那可以留空alt="" ，但不能省略這個屬性。

常見誤區：

• 把alt寫成文件名（例如“banner1.jpg”）
• 忽略圖片語義，寫得過於籠統（比如只寫“圖片”）

---

基本上就這些。 HTML 不復雜，但很多細節容易被忽視，尤其是剛開始學的人。多注意標籤的意義和用法，不僅能寫出更清晰的代碼，還能提升用戶體驗和頁面性能。