coding180 icon

Coding180

HTML Element: Image <img>

HTML Element: Image <img>

Tutorials > HTML > HTML Elements


To insert an image into a page we must use the HTML img element, it does not have a closing tag (similar to the <br> tag).

Generally, the image is located on the same server where our HTML pages are stored.

The syntax of this tag is:

<img src="Image path" alt="Image text"> 


For proper image, we need to initialize the src and alt properties of the img HTML tag.

In the src property, we indicate the name of the file that contains the image (on a Linux server it is case-sensitive, so I recommend that you always use lowercase for file names).

Another highly recommended property is alt, where we have a text that will be seen by users who visit the site with a browser that only allows text (or with a browser that has the option to download images disabled). The alt text should describe the content of the image.

Let's make a page that displays an image called geometric.jpg (The image is stored on the server in the same folder where this page is located):

<!DOCTYPE html>
    <html>

    <head>
        <title>Page title</title>
        <meta charset="UTF-8">
    </head>

    <body>
        <img src="geometric.jpg" alt="Geometric painting">
    </body>

    </html>

Loading this page in a browser results in:

Output:

Html Elements img - coding180

If the image is in a parent folder of where the HTML page is, then the syntax will be:

<img src="geometric.jpg" alt="Geometric painting">

Here we use src to specify the image name, since it's in the same folder with our source code.

If the image is outside your working folder, then the syntax will be:

<img src="../geometric.jpg" alt="Geometric painting">

That is, we precede .. and the slash / to the name of the image.

If we want to upload two folders, then we write:

<img src="../../geometric.jpg" alt="Geometric painting">

Finally, if we want to access an image that is in a folder called images but is at the same level:

<img src="../images/geometric.jpg" alt="Geometric painting">

First, we indicate that we go up to the parent directory using the colon .. and then we indicate the name of the folder and the image to display.

img comes from the word image

src comes from the word source

alt comes from the word alternative


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel