Course Content
Ultimate HTML
Ultimate HTML
Images
Images are an essential part of web design. They make a web page attractive for a visitor. It can be easily included in an HTML document using the <img>
tag.
index
index
index
src
- required attribute. Its value is the path to the image location. The path can be absolute and relative;alt
- required attribute. Provides alternative text that can be displayed when the image cannot be rendered;width
andheight
- specifies image size in pixel. Without these attributes an image will be rendered in its original size.
alt attribute
We make the image description informative and meaningful. It helps to describe the image for people who are visually impaired or unable to see it. This way, the browser will read the alt
attribute, and a user could understand why we have this image.
Let's imagine the following example. We have a source about horse racing. We want to show how competitors get ready for the racing.
Bad value for the alt
attribute will be:
Good value for the alt
attribute will be:
src attribute
The src
attribute can use both absolute and relative paths to specify the location of the image file.
Absolute path
It specifies the full URL of the image file on the web server. For example:
It means that the image file located at the https://example.com/images/image.jpg
link in the internet. Anyone can access the image using this link.
Please, inspect the following real example in the CodeSandbox below:
Note
To examine the file folder structure, drag the slider on the CodeSandbox interface's left side. In the top left corner, you will find a burger button represented by three stripes. Clicking on this button will navigate you to the file folder organization.
Relative path
It specifies the location of the image file relative to the current document. For example:
It means that the image.jpg
file located in the images
directory.
Please inspect the real example provided in the CodeSandbox below. You will find the images
folder, which contains the sun.png
file.
Note
To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.
Thanks for your feedback!