1.1 The <img> Element
Multimedia in HTML plays a crucial role in enhancing the visual appeal of web pages. Inserting images is one of the key aspects of multimedia in HTML. Most often, the <img> element is used for this. Let's take a closer look:
The <img> element is meant for embedding images into a web page. It's an empty element: it doesn't have a closing tag and includes only attributes.
Syntax
<img src="Image_URL" alt="Description" width="Width" height="Height">
<img src="images/photo.jpg" alt="Image description" width="500" height="300">
Let's take a closer look at the attributes of the <img> element
1.2 The src Attribute
The full name of the src attribute is source.
The src attribute specifies the path to the image file that should be displayed on the page. It can be either an absolute or a relative path.
Examples:
Absolute URL:
<img src="https://example.com/images/photo.jpg">
Relative path:
<img src="images/photo.jpg">
An absolute URL contains the full address to the image, including the protocol (http or https), domain, and path. A relative path specifies the file location relative to the current document, which is convenient when working with local files.
1.3 The alt Attribute
Full name: alternative text
The alt attribute provides a text description of the image. This text is displayed if the image cannot be loaded, and it enhances accessibility because screen readers use it to describe the image to visually impaired users.
Examples:
<img src="images/sunset.jpg" alt="Photo of a beautiful sunset">
A well-crafted alt text helps users understand the content of the image if it's unavailable and contributes to improving the page's SEO (search engine optimization).
1.4. The width Attribute
The width attribute sets the image's width in pixels. If the height attribute isn't specified, the image maintains its proportions when its width is changed.
Examples:
<img src="images/photo.jpg" width="500">
Using a fixed width can be helpful for controlling the image size, but it's important to consider responsive design.
1.5 The height Attribute
The height attribute sets the image's height in pixels. If the width attribute isn't specified, the image maintains its proportions when its height is changed.
Examples:
<img src="images/photo.jpg" height="300">
Like the width attribute, using a fixed height can be useful, but you need to consider responsiveness.
Example of using attributes together
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
<img src="images/sunset.jpg" alt="Photo of a beautiful sunset" width="500" height="300">
In this example, the image will be loaded from the file images/sunset.jpg, displayed with a width of 500 pixels and a height of 300 pixels, and if the image can't be loaded, the text "Photo of a beautiful sunset" will be shown.
GO TO FULL VERSION