Embedding Image in HTML page

In this article, we are going to learn how to embed images in a HTML document.

Table of Contents

• Embedding Image in HTML page
• Attributes
• Figure Caption

To add images to a page - we use <img> inline element
It is an empty element - it doesn’t wrap any other content and exists as a single tag.

src attribute - its value specifies the source of the image

<img src="pulsar.jpg">

If you have your images in a sub-folder, you must include the folder name in the src attribute:

<img src="/images/pulsar.jpg">

We can access images from any web address in the world:

<img src="https://source.unsplash.com/1600x900/?nature,water">

See this in Action

Attributes

alt Attribute

alt (alternative text) attribute - describes the contents of an image.

<img src="pulsar.jpg" alt="A pulsar star">

Significance:

• Essential for SEO - alt attribute value is picked up by search engines’ spiders as it conveys the purpose of an image.
• The alt text is displayed in place of the image if for some reason the image is not available.

style attribute

style attribute - to specify the width and height of an image.

<img src="pulsar.jpg" alt="A pulsar star“ style="width:500px;height:600px;">

Figure Caption

<figure> block-level element - used to semantically markup and wrap self-contained content (often media), e.g. images, audio clips, videos, blocks of code, diagrams, illustrations etc.

More than one item of self-contained content may be contained within the <figure> element.

<figcaption> element - adds a caption to the <figure> element. Can be used instead of <img> element’s alt attribute

<figure>
<img src="pulsar.jpg">
<figcaption>A beautiful pulsar star.</figcaption>
</figure>

The <figcaption> may be used anywhere within the <figure> element, but it may only appear once.