HTML Introduction | Basic HTML Elements | HTML Images

Tags:

An image is a visual element drawn on a two-dimensional plane. Images are one of the very important elements on web pages.

The image types available on web pages are as follows.

  • JPEG Images
  • GIF Images
  • PNG Images

Inserting images

When adding an image to HTML, use the <img> tag. The <img> tag is an empty tag without an end tag and is used with the following syntax.

Syntax

<img src="image address" alt="alternative text"/>

An example of inserting an image is shown below.

<img src="/resources/images/logo/128x128.png" alt="devkuma logo"/>

Run code

Image size: width and height

In HTML, you can set the size of an image by using the style attribute. You can also use the width and height attributes to set the image width and height in pixels.

Both methods conform to the HTML5 standard, but if you want to preserve the original image size regardless of internal or external style sheets that you will learn later with CSS, it is better to use the style attribute.

<img src="/resources/images/logo/128x128.png" alt="devkuma logo" style="width:256px;height:256px;">

Run code

Image alt attribute

alt displays alternative text for an image when the image cannot be displayed.

It provides alternative information for users when the browser cannot show the image, such as when the connection is slow or the actual image does not exist.

<img src="noimage.png" alt="No image available.">

Run code

Image border

You can use the border property to set whether an image has a border and how thick it is.

<img src="/resources/images/logo/256x256.png" alt="image border" style="border: 3px solid black">

Run code

You can set a link on an image by using the <a> tag.

<a href="/books/pages/112" target="_blank">
    <img src="/resources/images/logo/256x256.png" alt="flag">
</a>

Run code

Creating an image map

In HTML, you can create an image map by using the <map> tag. An image map is a feature that lets a part of an image be clicked and used like a button.

If you connect the usemap attribute of the <img> tag with the name attribute of the <map> tag, the relationship between the image and the map is set. The <map> tag has one or more <area> tags, and each <area> tag acts like a button.

<img src="/resources/images/logo/256x256.png" alt="devkuma logo" usemap="#devkuma"/>
<map name="devkuma">
  <area shape="rect" coords="105,145,150,175" alt="코"
        href="https://ko.wikipedia.org/wiki/%EC%BD%94">
  <area shape="rect" coords="25,50,60,85" alt="왼쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
  <area shape="circle" coords="205,65,30" alt="오른쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
</map>

Run code

img tag

Attribute Description
usemap Tells the browser that a map will be used for this image. Put the name of the map to use here.

map tag

Attribute Description
name The name to assign to the map tag.
id Put the same name as the one set in the name attribute.

Since HTML5, using the id attribute rather than the name attribute has become the recommended direction.

area tag

Attribute Description
shape The shape of the map, that is, the shape of the area where the link is applied. The default value default means the entire image area. Choose one of default, rect, circle, and poly.
coords The coordinates of the map. For a polygon (poly), at least three coordinates are required.
alt A setting for users who cannot see images, such as screen reader users, or for browsers that cannot load the image. Put replacement text for the image here.
title A tooltip. Text displayed when the mouse is placed over the area.
href The URL to move to when clicked.
In IE 7 and earlier, the content set in alt, not title, is displayed as the tooltip.

References