HTML Basics

HTML Introduction HTML Basic HTML Comments HTML Tags/Elements HTML Attributes HTML Formatting HTML Block and Inline HTML Charsets HTML Classes HTML Colors HTML Div HTML Headings HTML Id HTML Iframes HTML Images HTML File Paths HTML Tables HTML Layout HTML Lists HTML Links <a> HTML Paragraphs HTML Quotations HTML JavaScript HTML Emojis HTML URL Encode HTML Entities HTML Computercode HTML Symbols HTML Styles

HTML Forms

HTML Forms HTML Form Elements HTML Form Attributes HTML Input Attributes HTML Input Regex HTML Input Form Attributes HTML Input Types

HTML SEO

HTML Head HTML Page Title HTML Responsive HTML Semantics HTML Favicon

HTML Graphics

HTML Canvas HTML SVG

HTML Media

HTML Media HTML Audio HTML Video

HTML Reference

a abbr acronym address applet area article aside audio b base basefont bdi bdo big blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl DOCTYPE dt em embed fieldset figcaption figure font footer form frame frameset h1_-_h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noframes noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script search section select small source span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr

HTML <img> Tag

The <img> tag in HTML is used to insert an image onto a webpage. It does not have a closing tag, as it is an empty element that only requires attributes to function. The <img> tag is also a self-closing tag, which means it does not need a separate closing tag.

Basic Use of the <img> Tag

To use the <img> tag, you need to include the src attribute, which specifies the path to the image file. Here is an example:

<img src="image.jpg" alt="Description of the image">

In this example, "image.jpg" is the file path of the image you want to display, and "Description of the image" is the text that will be displayed if the image fails to load. The alt attribute is also important for accessibility purposes, as it provides a description of the image for users who may not be able to see it.

Main Attributes of the <img> Tag

Below is a table that lists the main attributes of the <img> tag and their uses:

Attribute Description
src The source URL of the image file.
alt Text description of the image for accessibility purposes.
width Specifies the width of the image in pixels.
height Specifies the height of the image in pixels.
title Tooltip text that appears when the mouse hovers over the image.

Example of Using <img> Tag with Additional Attributes

Here is an example of using the <img> tag with the width, height, and title attributes:

<img src="image.jpg" alt="Description of the image" width="200" height="150" title="Image Title">

In this example, the image will be displayed with a width of 200 pixels, a height of 150 pixels, and a tooltip text of "Image Title" when the mouse hovers over the image.

With this tutorial, you should now have a better understanding of how to use the <img> tag in HTML to display images on your webpages.