Alt-Tag in HTML

HTML-img-Tag enthält alt-Attribut. Dieses Attribut gibt die Informationen zum Bild an, wie Bildname, Bildlink, Bildautor, Bildspezifikation usw. Der Hauptzweck dieses Attributs besteht darin, dass das Bild bei langsamer Internetverbindung möglicherweise nicht, aber problemlos geladen wird. Anstatt also von ihnen zurückzukehren, würde der Benutzer, wenn er seinen Cursor von der Seite bewegt, Text zum Bild anzeigen. Daher kann er verstehen, dass sich auf dieser Seite Inhalte befinden, und einige Zeit warten, bis die Seite geladen ist.

Echtzeitszenario: Obwohl wir jedes Bild im Web anzeigen, ist es gegenüber dem Endbenutzer nicht fair, wenn er nicht weiß, worum es in dem Bild geht. Daher müssen wir mithilfe des Alt-Attributs einige Inhalte für das Bild angeben.

Wie funktioniert das Alt-Attribut in HTML?

Alt-Attribut bietet alternative Informationen für das Bild, um zu erkennen, wofür das Bild gedacht ist. Dieses Attribut lässt nur Text zu. Dieses Attribut ist in Tags verfügbar:

Dieses 3-Tags-Alt-Attribut dient nur dazu, Text über dem Bild anzuzeigen.

Syntax #1 – Tag

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

Syntax Nr. 2 – Tag

<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

Syntax Nr. 3 – Tag

<input type="image" src="image%20resource" alt="text">

Beispiele zur Implementierung des Alt-Tags in HTML

unten sind die Beispiele aufgeführt:

Beispiel #1

Code:

<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>

Ausgabe:

Wenn eine Bildressource verfügbar ist:

Wenn die Bildressource nicht verfügbar ist:

Beispiel #2

Code:

<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="Alt-Tag in HTML" 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>

Ausgabe:

Wenn eine Bildressource verfügbar ist:

Wenn die Bildressource nicht verfügbar ist:

Beispiel #3

Code:

<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>

First name:

Ausgabe:

Wenn eine Bildressource verfügbar ist:

Wenn die Bildressource nicht verfügbar ist:

Fazit

Alt ist ein Attribut, das in den Tags „area“, „img“ und „input“ verfügbar ist. Dieses Alt-Attribut wird verwendet, um Informationen über Bilder bereitzustellen, z. B. was ein Bild ist oder Bildkoordinaten, Bildautor usw.

Das obige ist der detaillierte Inhalt vonAlt-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!