HTML Images

❮ PrevNext ❯

HTML Images

HTML Images are used to enhance websites, to illustrate stories, to present products, in ad displays etc.

HTML provides web developers three ways for displaying images. They are

  • <img> - Used to display a simple image.
  • <picture> - Used to display different images for different display/device scenarios.
  • <map> - Used to display image with clickable areas.

HTML Img

Use <img> to add an image into a document.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <img src="wikimass.png" alt="wikimass.com" width="150" height="150"> </body> </html>
Run

HTML Picture

Use <picture> to provide versions of an image for different display/device scenarios.

Note: The <picture> tag contains zero or more <source> elements and one <img> element.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <picture> <source media="(min-width: 660px)" srcset="devices.jpg"> <source media="(min-width: 475px)" srcset="macbook.jpg"> <source media="(min-width: 385px)" srcset="ipad.jpg"> <img src="iphone.jpg" alt="apple iphone" style="width:auto;"> </picture> </body> </html>
Run

HTML Map

Use <map> tag to define an image-map. An image-map is an image with clickable areas.

Note: The <map> tag contains one or more <area> elements.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <img src="/devices.jpg" alt="apple Devices" style="width:auto;" usemap="#apple-products"> <map name="apple-products"> <area shape="rect" coords="10,20,340,350" alt="macbook" href="/macbook.htm"> <area shape="rect" coords="355,185,540,340" alt="ipad" href="/ipad.htm"> <area shape="rect" coords="545,240,625,340" alt="iphone" href="/iphone.htm"> </map> <p>Note: Click on any specific device to view its detail.</p> </body> </html>
Run

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author