Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Images | Media and Tables
Ultimate HTML
course content

Course Content

Ultimate HTML

Ultimate HTML

1. Web Development
2. Tags and Attributes
3. Document Structure
4. Media and Tables
5. Forms

bookImages

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.

html

index

css

index

js

index

copy
  • 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 and height - 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.

1. Which tag can we use to put an image on a website?
2. What attribute is required to specify for an `<img/>` tag?
Which tag can we use to put an image on a website?

Which tag can we use to put an image on a website?

Select the correct answer

What attribute is required to specify for an `<img/>` tag?

What attribute is required to specify for an <img/> tag?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 2
some-alt