# HTML Images
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### HTML Images Syntax
The HTML `` tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The `` tag creates a holding space for the referenced image.
The `` tag is empty, it contains attributes only, and does not have a closing tag.
The `` tag has two required attributes:
* src - Specifies the path to the image
* alt - Specifies an alternate text for the image
{% code title="Syntax" overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### The src Attribute
The required `src` attribute specifies the path (URL) to the image.
**Note:** When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the `alt` text are shown if the browser cannot find the image.
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### The alt Attribute
The required `alt` attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the `alt` attribute should describe the image:
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### Image Size - Width and Height
You can use the `style` attribute to specify the width and height of an image.
{% code overflow="wrap" lineNumbers="true" %}
```markup
```
{% endcode %}
### Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in the `src` attribute:
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### Images on Another Server/Website
Some web sites point to an image on another server.
To point to an image on another server, you must specify an absolute (full) URL in the `src` attribute:
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### Animated Images
HTML allows animated GIFs:
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### Image as a Link
To use an image as a link, put the `` tag inside the `` tag:
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### Image Floating
Use the CSS `float` property to let the image float to the right or to the left of a text:
{% code overflow="wrap" lineNumbers="true" %}
```html
The image will float to the right of the text.
The image will float to the left of the text.
```
{% endcode %}
### Background Image on a HTML element
To add a background image on an HTML element, use the HTML `style` attribute and the CSS `background-image` property:
{% code overflow="wrap" lineNumbers="true" %}
```markup
```
{% endcode %}
### Background Cover
If you want the background image to cover the entire element, you can set the `background-size` property to `cover.`
Also, to make sure the entire element is always covered, set the `background-attachment` property to `fixed:`
This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### The HTML \ Element
The HTML `` element gives web developers more flexibility in specifying image resources.
The `` element contains one or more `` elements, each referring to different images through the `srcset` attribute. This way the browser can choose the image that best fits the current view and/or device.
Each `` element has a `media` attribute that defines when the image is the most suitable.
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://codingzonebd.gitbook.io/html-elements/html-images.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
```
{% endcode %}
### HTML Images Syntax
The HTML `
```
{% endcode %}
### The alt Attribute
The required `alt` attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the `alt` attribute should describe the image:
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### Images on Another Server/Website
Some web sites point to an image on another server.
To point to an image on another server, you must specify an absolute (full) URL in the `src` attribute:
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### Animated Images
HTML allows animated GIFs:
{% code overflow="wrap" lineNumbers="true" %}
```html
```
{% endcode %}
### Image as a Link
To use an image as a link, put the `
```
{% endcode %}
### Image Floating
Use the CSS `float` property to let the image float to the right or to the left of a text:
{% code overflow="wrap" lineNumbers="true" %}
```html
