HTMLのAltタグ-htmlチュートリアル-php.cn

HTMLのAltタグ

PHPz

リリース： 2024-09-04 16:33:17

オリジナル

954 人が閲覧しました

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

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

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

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

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

構文 #1 – タグ

<img src="image%20resource" alt="text">

ログイン後にコピー

構文 #2 – タグ

<img src="image%20resource" 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" src="image%20resource" 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>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>Images with img tag and alt attribute</h1>
<div class="row">
<div class="column">
<img src="3.jpg" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="4.jpg" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="5.jpg" alt="Third Bird"   style="max-width:90%">
</div>
</div>

ログイン後にコピー

åºå:

ç»åãªã½ã¼ã¹ãå©ç¨å¯è½ãªå ´å:

HTMLのAltタグ

ç»åãªã½ã¼ã¹ãå©ç¨ã§ããªãå ´å:

HTMLのAltタグ

ä¾ #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>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>Images with area tag and alt attribute</h1>
<img src="d2.jpg"    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>

ログイン後にコピー

åºå:

HTMLのAltタグ

ä¾ #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>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>Images with input tag and alt attribute</h1>

ログイン後にコピー

åºå:

HTMLのAltタグ