Learn How Does Alt Tag Work In HTML With Examples - EduCBA

Trang chủ » Html Td Alt Text » Learn How Does Alt Tag Work In HTML With Examples - EduCBA

Có thể bạn quan tâm

Updated April 12, 2023

Alt-Tag-in-HTML

 

 

Introduction to Alt Tag in HTML

HTML img tag contains alt attribute. This attribute 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 the user go back from them, if the user moved his cursor from the page, it would display some text regarding the image; therefore, he can understand that there is some content on this page and wait for some time until the page is loaded.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Real-Time Scenario: While we are displaying any image on the web, it is not fair to the end-user without knowing what the image is about. So we have to specify some content to the image by using the alt attribute.

How does Alt Attribute work in HTML?

Alt Attribute provides alternative information for the image to recognize what the image is meant for. This attribute allows only text. This attribute available in tags:

This 3 tags alt attribute is only for showing text on top of the image.

Syntax #1 – <img> tag

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

Syntax #2 – <area> tag

<img src="image resource" 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 #3 – <input> tag

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

Examples to Implement Alt Tag in HTML

below are the examples mentioned:

Example #1

Code:

<!DOCTYPE html> <html> <head> <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> </head> <body> <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="width: 100%" /> </div> <div class="column"> <img src="4.jpg" alt="Second Bird" style="width: 100%" /> </div> <div class="column"> <img src="5.jpg" alt="Third Bird" style="width: 100%" /> </div> </div> </body> </html>

Output:

If image resource is available:

Alt attribute

If image resource is not available:

img tag

Example #2

Code:

<!DOCTYPE html> <html> <head> <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> </head> <body> <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" width="146" height="127" alt="Dog" 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> </body> </html>

Output:

If image resource is available:

area tag

Alt Tag in HTML - 4

If image resource is not available:

Alt Tag in HTML - 5

site

Example #3

Code:

<!DOCTYPE html> <html> <head> <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> </head> <body> <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> <form action="#"> <label for="firstName">First name:</label> <input type="text" id="firstName" name="firstName"> <input type="image" src="R1.jpg" alt="Submit Button" width="48" height="48"> </form> </body> </html>

Output:

If image resource is available:

Alt Tag in HTML - 7

If image resource is not available:

input tag

Conclusion

Alt is an attribute available in area, img and input tags. This alt attribute is used to provide information about images like what is an image or image coordinates, image author, etc.

Recommended Articles

This is a guide to Alt Tag in HTML. Here we discuss an introduction to Alt Tag in HTML, how does this tag work with programming examples. You can also go through our other related articles to learn more –

  1. Fieldset Tag in HTML
  2. Cursor in HTML
  3. Ansible Tags
  4. PHP Tag in HTML

Từ khóa » Html Td Alt Text