HTML - alt 屬性

HTML 的alt屬性用於在img元素中提供影像的文字描述，如果影像載入失敗，則顯示該描述。

當正確使用alt屬性時，每個人都可以理解網站上影像的資訊和上下文，包括殘疾人士或網際網路連線緩慢的人。這對搜尋引擎最佳化、包容性設計和 Web 可訪問性至關重要。

語法

<tag alt = "value"></tag>

應用於

以下列出的元素允許使用 HTML alt 屬性。

元素	描述
<img>	HTML <img> 標籤用於在文件中新增圖片
<area>	HTML <area> 元素在 HTML 中用於定義影像地圖中可點選的區域。
<input>	HTML <input> 元素在 HTML 中用於輸入文字。

HTML alt 屬性示例

以下程式碼描述了 alt 標籤的各種用法。

帶有 img 元素的 Alt 屬性

以下程式碼顯示瞭如何將 alt 屬性與 img 標籤一起使用。在第一種情況下，影像在沒有任何錯誤的情況下顯示，但在第二種情況下，由於在指定位置找不到影像，因此顯示備用文字。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'alt' attribute</title>
   <style>
      img {
         width: 300px;
         height: 100px;
      }
   </style>
</head>

<body>
   <!--HTML 'alt' attribute-->
   <p>Example of the HTML 'alt' attribute</p>
   <p>Image without any error</p>
   <img src="https://tutorialspoint.tw/images/logo.png?v3" 
      alt="Tutorialpoint logo">
   <br>
   <p>Images with error</p>
   <img src="Asset-2PP_.png" 
      alt="Tutorialpoint logo">
</body>

</html>

帶有 input 元素的 Alt 屬性

考慮另一種情況，我們將使用 alt 屬性與 input type=image。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'alt' attribute</title>
   <style>
      img {
         width: 300px;
         height: 50px;
      }
   </style>
</head>

<body>
   <!--HTML 'alt' attribute-->
   <p>Example of the HTML 'alt' attribute</p>
   <p>Image with an error</p>
   <input type="image" 
      src="download1.png" 
      alt="Tutorialspoint old logo">
   <p>Image without any error</p>
   <input type="image" 
      src="https://tutorialspoint.tw/images/logo.png?v3" 
      alt="Tutorialspoint logo">
</body>

</html>

帶有 area 元素的 Alt 屬性

讓我們看看下面的示例，我們將使用 alt 屬性與 area 標籤一起使用。以下程式碼將生成一個包含網頁上顯示的影像的輸出。當用戶點選影像時，它會顯示其 alt 文字。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'alt' attribute</title>
</head>

<body>
   <!--HTML 'alt' attribute-->
   <p>Example of the HTML 'alt' attribute</p>
   <!--<img src="images (1).png"
    usemap="#sep" 
    width = "400" 
    height="379">-->
   <img src="images (1).png" 
      alt="HTML CSS JS logo" 
      usemap="#sep" 
      width="200" 
      height="200">
   <map name="sep">
      <area shape="circle" 
      coords="30,44,270,350" 
      alt="HTML logo" 
      href="html logo.html">
   </map>
</body>

</html>

HTML logo.html 檔案程式碼

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML</title>
</head>
<body>
   <img src="html log.jpg" alt="HTML logo">
</body>
</html>

支援的瀏覽器

屬性
alt	是	是	是	是	是

html_attributes_reference.htm

列印頁面