html標籤中的lang屬性有什麼作用？

王铁柱6發表於2024-12-09
HTML

lang 屬性在 HTML 中指定元素內容的語言。它有兩個主要作用：

  1. 輔助技術（例如螢幕閱讀器）： lang 屬性幫助螢幕閱讀器以正確的發音和語調朗讀內容。例如，英語和西班牙語中相同的單詞可能有不同的發音。螢幕閱讀器使用 lang 屬性來確定正確的發音。

  2. 樣式和指令碼： CSS 和 JavaScript 可以使用 lang 屬性來應用特定於語言的樣式或行為。例如，你可以使用 CSS 為不同語言的引號應用不同的樣式，或者使用 JavaScript 根據使用者的語言顯示不同的訊息。

使用方法：

lang 屬性可以應用於任何 HTML 元素，並且其值應該是有效的語言程式碼。通常使用雙字母 ISO 639-1 語言程式碼（例如 en 表示英語，es 表示西班牙語，zh 表示中文），也可以使用更具體的 IETF 語言標籤（例如 en-US 表示美式英語，zh-CN 表示簡體中文）。

示例：

<html lang="en">
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is some text in English.</p>

  <div lang="es">
    <p>Este texto está en español.</p>
  </div>

  <div lang="zh-CN">
    <p>這段文字是簡體中文。</p>
  </div>
</body>
</html>

在這個例子中：

  • <html> 元素上的 lang="en" 屬性指定整個文件的主要語言是英語。
  • <div lang="es"> 中的內容被標記為西班牙語。
  • <div lang="zh-CN"> 中的內容被標記為簡體中文。

最佳實踐：

  • 始終在 <html> 標籤上設定 lang 屬性，以指定文件的主要語言。
  • 對於任何語言不同的內容，使用 lang 屬性來標記其語言。
  • 使用有效的語言程式碼。

總而言之，lang 屬性在 HTML 中起著至關重要的作用，它有助於提高可訪問性，並允許根據語言應用不同的樣式和行為。 雖然它在瀏覽器中的視覺效果可能不明顯，但它對螢幕閱讀器使用者和其他輔助技術至關重要。

相關文章