HTMLのAltタグ

HTMLのimgタグにはalt属性が含まれています。この属性は、画像名、画像リンク、画像作成者、画像仕様などの画像に関する情報を指定します。この属性の主な目的は、インターネット接続が遅い場合、画像が読み込まれないことがありますが、問題なく読み込まれることです。したがって、ユーザーがページから戻る代わりに、ユーザーがページからカーソルを移動すると、画像に関するテキストが表示されます。したがって、彼はこのページに何らかのコンテンツがあることを理解し、ページがロードされるまでしばらく待つことができます。

リアルタイム シナリオ: Web 上に画像を表示している間、その画像が何であるかを知らずにエンドユーザーにとって不公平です。したがって、alt 属性を使用して画像にコンテンツを指定する必要があります。

HTML では Alt 属性はどのように機能しますか?

Alt 属性は、画像の意図を認識するための代替情報を画像に提供します。この属性ではテキストのみが許可されます。この属性はタグで使用できます:

この 3 つのタグの alt 属性は、画像の上にテキストを表示するためだけに使用されます。

構文 #1 – タグ

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="text">

構文 #2 – タグ

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="text" usemap="#name">
//usemap name and map name attribute name must be same
<map name="name">
<area coords="specify 4 coordinates" href="file.htm" alt="text">
</map>
<input> tag

構文 #3 – タグ

<input type="image" alt="text">

HTML での Alt タグの実装例

以下に挙げる例を示します:

例 #1

コード:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: blue;
text-align: center;
}
p {
color: fuchsia;
font-size: 20px;
border: 2px solid red;
}
/*Aligning images side by side*/
* {
box-sizing: border-box;
}
.column {
width: 33.33%;
padding: 5px;
float: left;
}
.row::after {
clear: both;
display: table;
content: "";
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-img-tag-and-alt-attribute">Images with img tag and alt attribute</h1>
<div class="row">
<div class="column">
<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="4.jpg" class="lazy" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="5.jpg" class="lazy" alt="Third Bird"   style="max-width:90%">
</div>
</div>

出力:

画像リソースが利用可能な場合:

画像リソースが利用できない場合:

例 #2

コード:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-area-tag-and-alt-attribute">Images with area tag and alt attribute</h1>
<img src="/static/imghw/default1.png" data-src="d2.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTMLのAltタグ" usemap="#dog">
<map name="dog">
<area shape="rect" coords="0,0,81,125" href="https://www.educba.com/category/software-development/software-development-tutorials/python-tutorial/" alt="Python">
<area shape="circle" coords="91,59,4" href="https://www.educba.com/category/software-development/software-development-tutorials/java-tutorial/" alt="Java">
<area shape="circle" coords="125,59,9" href="https://www.educba.com/category/software-development/software-development-tutorials/bootstrap-tutorial/" alt="Bootstrap">
</map>

出力:

画像リソースが利用可能な場合:

画像リソースが利用できない場合:

例 #3

コード:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
label, input {
color: green;
font-size: 20px;
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-input-tag-and-alt-attribute">Images with input tag and alt attribute</h1>

First name:

出力:

画像リソースが利用可能な場合:

画像リソースが利用できない場合:

結論

Alt は、area、img、input タグで使用できる属性です。この alt 属性は、画像や画像の座標、画像の作成者などの画像に関する情報を提供するために使用されます。

以上がHTMLのAltタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。