How To Insert An Image In HTML - [Source Code]

Why Do We Need To Insert Images In HTML?

In this modern-day world, a website is nothing without an image.

We have seen that websites in the late 90s or early 2000s had more text and less of images.

This is not true today, every web page has lots and lots of images that portray their product, their business, or a blog in a much nicer and more descriptive way.

Using graphics and infographics, web pages can convey their message in a great way without using too many words.

Even in this blog post or other blog posts in this blog, we use a lot of images frequently with text to explain our topic.

Adding Images In HTML

The HTML language provides us an easy way to insert images in an HTML page.

We use the "img" element to insert images in HTML.

The img tag goes inside the HTML body.

Let's see how we can use the img tag in an HTML document.

This is what a blank HTML structure looks like:

We will now create an img tag inside the body tag.

The img tag has two important properties. The most important is the src attribute.

This src (source) attribute takes a path where your image is located.

This path could be local or over the internet.

Let's use an image that is hosted over the internet (e.g. the Code like a dev logo).

And, here's what the result of the above HTML looks like. As you can see, we have inserted an Image in an HTML document.