We will critically be analyzing the step-by-step procedure on how to use an image element in HTML.

But, first what is HTML?

A typical web page has 3 separate functions to deliver an experience to the user;

1..HTML: A content layer or the information you see on a page.

2..CSS: A presentation layer that handles how that information looks

3: JAVASCRIPT: A behavior layer that lets the user interact with that page.

Html stands for the hypertext markup language, it’s any text displayed on the computer screen and contains links to another hypertext document. The web is a connection of billions of documents interconnected to hyperlinks. Html is a type of language common to every website.HTML is understood by all browsers from browsers on phones to tablets to desktop computers, and that’s why every website and web app is made in HTML, it’s the language of the web. Above is a simple basic on “how to use images in HTML”.

A markup language provides meanings to a document using instructions that describes how text should be structured, formatted, and laid out.

So, in other words, HTML is a markup language the browser uses to present information to users like text, videos, mages, and links. Html comes with two tags; an opening (<) and a closing tag (>).

Html describes the text that it’s marking up.


STEP 1: Create an image tag<img, in other to display an image Set the Src”” of the image tag to the link or URL of the image to be displayed.

STEP 2: you add the alternative attribute on the image tag, alt””>.this is necessary when the image fails to load on the website or for understanding by screen readers.

STEP 3: Width and height. Width=”400”, height=”200” >this should be done in pixels in most cases in percentage; width=”80%”, height=”30&”>

STEP 4: Adding a link to your image, we will use the anchor tag=<a> in the opening of the anchor tag we’ll set the hf= href” value to the UR of the image and close tag>.

src""alt"young-african-americanwoman-isolated-yellow-studio-background"width="200" height="100">
src""alt"young-african-americanwoman-isolated-yellow-studio-background"width="80%" height="30&">
<a href="https://WWW.freepik,com">
src""alt"young-african-americanwoman-isolated-yellow-studio-background"width="200" height="100">


There are about two other modes: the figure and picture element;

  1. The figure element was added as part of the HTML specification and it has an image inside of it as well. figures come with descriptions, they provide an attachment between the image and caption. it says to the browser and search engine that this specifically describes what this is. it’s an enhanced version of the <alt>.

2. Picture element allows you to define multiply sources of the images.

An elaborate study of this other mode will be in my next article. Feel free to drop a comment as a question or contribution. Except for More of such amazing articles here. Follow to get it first. Thank you for reading.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store