How to insert image in html

How to insert image
Alternative text and image titles

The text content of a web page is part of an HTML document surrounded by tags that define the meaning and purpose of each part of the text. Images, on the other hand, are external files and are not actually part of a web page. Images on the page are embedded using the <img> tag. Displaying a web page that includes images is a two-stage process: the browser first downloads the markup, and then loads the external images. Wherever the <img> tag is located in the HTML document code, the browser requests the file referenced by the tag from the web server and displays it in place of the tag.

How to insert image

The HTML <img> tag refers to elements that insert content, that is, the browser creates the space of the required size in the place of the tag, in which the image is displayed. The <img> tag is a single tag that does not have content, it has a mandatory src attribute that specifies the path (relative or absolute) to the graphic file.

Browsers process images as inline elements, so they will be placed on one line with text or other inline elements (including other images):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <p>
      This flower: <img src="flower.png">, he is very beautiful.
    </p>

  </body>
</html>

Try it »

Alternative text and image titles

The alt attribute is another required attribute of the HTML <img> tag, it provides alternate text that is displayed when the image is not available. This can happen, for example, because the image extension is incorrectly specified, the path is incorrectly registered, etc.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <p>
      <img src="elephant.jpg" alt="The image is drawn by an elephant" width="200" height="50">
    </p>

  </body>
</html>

Try it »

The text of the alt attribute should be a meaningful replacement for the image, so you should try to describe what is pictured in the image. A well-written alternative text can inform the user that the missing image is a logo, picture, illustration, portrait, landscape, sketch, map, chart and so on.

Images that do not belong to the main content of the page, but are purely decorative, must also have the alt attribute, but instead of describing their decorative properties, its value can be left blank (alt="").

Note: if you need to add a tooltip with an additional description to the image, you can use the global title attribute:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <p>
      This flower: <img src="flower.png" title="Very very beautiful flower">,
	  he is very beautiful.
    </p>

  </body>
</html>

Try it »

To see a tooltip, that is, the information placed in the title attribute, you must hover the mouse pointer over the image.

With this theme look: