HTML Image

HTML Image

HTML Image

HTML Images helps to make beautiful websites which attract the visitors.

  • In HTML, <img> tag is used to show images (like jpg, png, gif etc.) on the web page.

  • HTML Image is defined by <img src="url"> syntax.

  • src stands for Source.

  • url stands for Uniform Resource Locator(where our resource is located).

  • <img> tag is an example of One-sided tag.

Example:
<img src="../../favicon.png">
Run Code »

Run the code to see the effect.




HTML Alt Attribute

  • The alt attribute provides an alternative information of an image when the image is not displayed on the web page.

  • Alternative information is in the form of text which defines the title or summary of the image.

  • It helps the users to get information about the image which helps them to understand the web page without seeing the image.

There may be several reasons when the image is not displayed on the webpage
  • Slow internet connection

  • An error in the src attribute

  • Incorrect image source link

It also helps blind persons to read web page because screen reader only read the text.

Example:
<img alt="Logo of Poori Padhai" src="../../favicon.pnx">
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Image Alt Attribute.

  • Above, the link of the image is incorrect.

  • Incorrect link : favicon.pnx

  • Correct link : favicon.png

  • Extension of image is different.

  • So, as a result, we will get alt text visible on the screen.


HTML Width and Height Attribute

The width and height attribute used to re-size an image.

Example:
<img width="40" height="50" src="../../favicon.png">
Run Code »
Example Explanation:

In the above, we have shown an example of HTML Width and Height Attribute.

  • width="40" make the size of the image 40px and height="50" make the size of the image 50px.

Run the code to see the effect.




HTML Image in Hindi

Best Use:360p or more (480p or 720p)
×

Course Menu