Coast - HTML Images Tutorialt
Ship - HTML Images Tutorial
Taj-mahal - HTML Images Tutorial
Plane - HTML Images Tutorial

1. Introduction to HTML Images

Images are an ideal source of enhancing the beauty of web pages. Infact images can rank your website high with proper usage. Therefore HTML provides us facility to insert images into the web pages. Also we can use HTML images in a number of ways to produce useful documents. See the list below:

  • We use HTML images to make our pages beautiful
  • HTML images may also be used as HTML links
  • Images can also be used as image map
  • We can also style our HTML elements with images as background
  • Images can have different sizes which we can adjust with CSS styles
  • We can also display figures to present self explaining images

Tutorial Contents:

  1. What are HTML Images?
  2. How to Create HTML Image Links?
  3. What is HTML Image Map?
  4. Use of HTML Images as Backgrounds
  5. What is a Picture Element in HTML?
  6. A Figure Element in HTML

1.1. HTML Image Syntax

An HTML image tag has following features and syntax:

  • We use <img /> element to insert images
  • The slash at the end of the tag is must in XHTML
  • An <img> has no closing tag
  • HTML Images use attributes to define the images
  • src attribute is used to specify the url of the image
  • alt attribute defines the alternative text

Example

<img src=”coast.jpg” alt=”Coast – HTML Image Tutorial” />
<img src=”ship.jpg” alt=”Ship – HTML Image Tutorial” />
<img src=”taj-mahal.jpg” alt=”Taj-mahal – HTML Image Tutorial” />
<img src=”plane.jpg” alt=”Plane – HTML Image Tutorial” />

Try in CodeLab

1.2. The Alt Attribute

An alt attribute is an alternative text and it has following properties:

  • The alt text will display in case images are missing or browser fails to load the image due to poor connection
  • The alt attribute is also helpful for blind people and search engines
  • Also, the text of alt attribute should describe the image
  • A browser will not validate an image correctly without alt text

Example

<img src=”coast.jpg” alt=”This is a coast.” />

Try in CodeLab

1.3. HTML Images Size

We can adjust the size of HTML images by following way:

  • We can use <style> attribute to define the size for images
  • The width and height attributes can also be used to define the size for an image
  • Also the width and height attributes do not take any size unit
  • Importantly, the width and height attribute always defines size in pixels

Example

<img src=”coast.jpg” alt=”This is a coast.” width=”200″ height=”150″ />
OR
<img src=”coast.jpg” alt=”This is a coast.” style=”width:200px;height:150px;” />

Try in CodeLab

Consider This:

You can also define size for image by using class or id attributes too. See HTML styles tutorial to learn more about it.
Also you must make a practice of defining the sizes of image or else images may distort the content or look unattractive.

2. HTML Image Links

Interestingly, HTML allows us to add links to HTML images. In this way, an image will appear as a clickable HTML element. Learn more about image links in HTML links tutorial. See the below example to understand the usage of the HTML image as a link.

Example


Coast - HTML Image Links
Click the above image, it will open a new window.
For more understanding, go to codelab and do more practice.
Also, images can float right or left using css float property. To learn more about css float, visit CSS float tutorial to understand this beaviour.

Try in CodeLab

3. HTML Image Map

Furthermore HTML images has an other feature to use them as HTML image map. Image map is an image with different clickable area that points to different pages or sections. All the areas are specified within the image map.

3.1. HTML Image Map Features

Usually, an image map has following features:

  • HTML image map uses <map> element to define image map
  • The name attribute in map element has connection with usemap attribute in image element
  • Whereas the map element contains certain <area> elements that define clickable areas
  • Also, the area element uses coords attribute to define the coordinates
  • It also uses href attribute to define link of the hotspot
  • And shape attribute to select the shape of the area
  • These regions or areas are also named as hotspots

See the below example to understand the image map and practice in codelab to understand more:

Try clicking on any of below section to navigate to appropriate url. Its basically a navigation menu created by using image map. Further try it in codelab.
HTML Image Map

Home CodeLab About Contact

Example

<img style=”width: 100%; height: 100%; brder: none;” src=”https://www.tutsinsider.com/wp-content/uploads/images/image-map.png” alt=”Imagemap” usemap=”#Map” /> 
<map name=”Map”> 
	<area coords=”0,0,200,500″ shape=”rect” href=”https://www.tutsinsider.com/” /> 
	<area coords=”201,0,400,500″ shape=”rect” href=”https://www.tutsinsider.com/codelab” /> 
	<area coords=”401,0,600,500″ shape=”rect” href=”https://www.tutsinsider.com/about” /> 
	<area coords=”601,0,800,500″ shape=”rect” href=”https://www.tutsinsider.com/contact” /> 
</map>

Try in CodeLab

3.2. Image Map Explanation

Folowing image explains the coordination representation as shown in the above example.
Image Map Description
Also the above image is an example of image map using rectangles only. An image map can have other shapes also:

  • We use shape attribute to select any of the following shape
  • Rectangle
  • Circle
  • elipse
  • Triangle
  • Polygon

4. HTML Images Background

Luckily we can use images as the background of HTML elements. Also, we use HTML images as background to enhance the page beauty and sometimes to display a banner. Actually, there are several uses of images as a background.  See detail in CSS backgrounds tutorial. The following example depicts it clearly:

Example

<body style=”background-image: url(‘https://www.tutsinsider.com/wp-content/uploads/images/background-image.jpg’);” alt=”HTML Images Background” />
	<h2>This page has a background image. Try yourself</h2>
</body>

Try in CodeLab

5. HTML Picture Element

Whenever we want more flexibility and want to make our web pages responsive, we use HTML picture element.

5.1. Characteristics of Picture Element

A picture element in HTML can have following characteristics:

  • Picture element is introduced in HTML5
  • A picture element has multiple <source> elements that specifically point to certain image source
  • The source element has media attribute to define the screen size of the browser
  • It also specify the location of image using srcset attribute
  • In this way the browser will choose best image that fits the current screen size
  • All the remaining images will be ignored
  • The last child element of the picture element should be img element
  • Image element is added for the browsers that do not support picture element or no source fits the screen size properly

Consider the following example in which we created three different childs for picture element. See the results in codelab and clear your concepts:

Example

<picture>
  <source media=”(max-width: 640px)” srcset=”red_flower.jpg”>
  <source media=”(max-width: 420px)” srcset=”pink_flower.jpg”>
  <img src=”waterfall.jpg” alt=”Flowers” style=”width:auto;”>
</picture>

Try in CodeLab

6. HTML Figure Element

Whenever we need to share some self-explaining image, we use <figure> element. We can use this element to display illustrations, diagrams, images, flowcharts, etc. Furthermore the content of figure element is independent of the surrounding content and if removed there will be no effect. It also uses <figcaption> to display the caption for the image. see the below example:

Example

<figure>
  <img src=”lang_tutorials.png” alt=”Tuts Insider Languages Tutorials” />
  <figcaption>This image is about programming languages.</figcaption>
</figure>

Try in CodeLab

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us