> For the complete documentation index, see [llms.txt](https://codingzonebd.gitbook.io/html-elements/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codingzonebd.gitbook.io/html-elements/html-images.md). # HTML Images
{% code overflow="wrap" lineNumbers="true" %} ```html Italian Trulli ``` {% 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 alternatetext ``` {% 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 Flowers in Chania ``` {% 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 Flowers in Chania ``` {% 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 Girl in a jacket HTML5 Icon HTML5 Icon ``` {% 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 HTML5 Icon ``` {% 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 W3Schools.com ``` {% endcode %} ### Animated Images HTML allows animated GIFs: {% code overflow="wrap" lineNumbers="true" %} ```html Computer Man ``` {% endcode %} ### Image as a Link To use an image as a link, put the `` tag inside the `` tag: {% code overflow="wrap" lineNumbers="true" %} ```html HTML tutorial ``` {% 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

Smiley face The image will float to the right of the text.

Smiley face 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 Beatles ``` {% endcode %}