HTML Images

Content

  1. Syntax
  2. Alt Attribute
  3. Size
  4. Floating
  5. Image Maps
RightArrow

Links

 RightArrow

Tables

Syntax

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

<img src="url" alt="some_text" style="width:width;height:height;">

Alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

If a browser cannot find an image, it will display the value of the alt attribute.

HTML Code:

<p><img src="html_symbol_01.jpeg" alt="HTML Icon" style="width:128px;height:128px;"> <img src="html_symbol.jpeg" alt="HTML Icon" style="width:128px;height:128px;"></p>

Result:

HTML Icon HTML Icon

Size

You can use the style attribute to specify the width and height of an image.

The values are specified in pixels (use px after the value).

Alternatively, you can use the width and height attributes. Here, the values are specified in pixels by default.

Note: You can use the style attribute to specify the width and height of an image. The values are specified in pixels (use px after the value). Alternatively, you can use the width and height attributes. Here, the values are specified in pixels by default.

HTML Code:

<p><img src="HTML5_Logo.png" alt="HTML5 Icon" style="width:128px;height:128px;"> <img src="HTML5_Logo.png" alt="HTML5 Icon" width="128" height="128"></p>

Result:

HTML5 Icon HTML5 Icon

Floating

Use the CSS float property to let the image float to the right or to the left of a text.

HTML Code:

<p><img src="HTML5_Logo.png" alt="HTML5 Logo" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p> <p><img src="HTML5_Logo.png" alt="HTML5 Logo" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p>

Result:

HTML5 Logo The image will float to the right of the text.

HTML5 Logo The image will float to the left of the text.

Image Maps

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

The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map.

HTML Code:

<!-- Image Map --> <!-- coords (rect): "x1, y1, x2, y2" --> <!-- coords (circ): "x, y, radius" --> <h1 style="text-align:center;">Images Maps </h1> <img src="images/pokemon_01.jpg" alt="Pokemon_01" usemap="#pokemon_01" title="Pokemon_01" style="width:490px; height:245px; display:block; margin-left:auto; margin-right:auto;"> <map name="pokemon_01"> <area shape="rect" coords="0,0,100,245" alt="Bulbasaur_01" href="html_sources/1201_bulbasaur.html" target="_blank"> <area shape="rect" coords="130,0,230,245" alt="Pikachu_01" href="html_sources/1202_pikachu.html" target="_blank"> <area shape="rect" coords="260,0,360,245" alt="Charmander_01" href="html_sources/1203_charmander.html" target="_blank"> <area shape="rect" coords="370,0,490,245" alt="Squirtle_01" href="html_sources/1204_squirtle.html" target="_blank"> </map>

Result:

Images Maps

Pokemon_01 Bulbasaur_01 Pikachu_01 Charmander_01 Squirtle_01

HTML Index

References

  1. W3Schools

This page is only a summary of the material from W3Schools. Definitions, Examples and Codes are exclusive property of W3Schools.