Tutorials

KodeKite Tools

HTML
Flexbox
SVG
Canvas
HTML Tutorial

More


HTML Alt Attribute
Alt Attribute

alt attribute is used to provide information about image <img /> tag. The alt full form is alternate, By using alt attribute you can show message about image to viewer when your image does not appear in browser.

Syntax

<img src=URL alt=image name or information />


Here URL is image location where image is placed in your PC or laptop and alt is the name or any inforamtion about image.


Example

Angry Bird

Angry Bird

After changing image directory name alt Attribute content Angry Bird displayed

Angry Bird

Now if you remove your picture from directory and run above code it will show you alt text which is bulb.


Practice Task

Open notepad or any other text editor, follow the following points.


  • Use src attribute and put 2 images in your page
  • Create 2 paragraphs elements
  • Put paragraph 1 first with "Alt" content and then image 1
  • Put paragraph 2 after image 1 with "Alt" content and then image 2
  • both images should be different or you can repeat same image two times
  • Give width of 100 and height of 100 to each image
  • Give alt attribute to each picture
  • Now change image directory and run code
  • Use <br /> if neccessary otherwise leave it

save file with name task.html or task.htm and then open it using any browser and see results.


Solution

Birds Image

Birds

Birds Image after changing image directory alt Attribute content Birds displayed

Birds

In above task you can see alt text which is Birds because we have deleted picture from directory or change directory in URL address.