Image img in HTML

HTML image syntax

In HTML, images are defined with tags Picture 1 of Image img in HTML

Card   is empty, contains only attributes, and has no closing tag. The src attribute specifies the URL (web address) of the image.

< img src="url" >

The alt attribute

The alt attribute is used to add descriptive text to the image. If for some reason the user cannot view the image (due to a weak network, a src attribute error, or a screen reader).

The value of the alt attribute is the description of the image.

< img src="img_tipsmake.jpg" alt="Tipsmake" >

If the browser cannot find the image, it will display the alt attribute value.

Note: the alt attribute is required. The website will be invalid if the image does not have this attribute.

Image size - width and height

Use the style attribute to specify the height and width of the image.

< img src="TipsMake.jpg" alt="TipsMake" style="width:500px;height:600px;" >

Alternatively, you can use the width and height properties.

< img src="congnghe.jpg" alt="Trang web công nghệ" width="500" height="600">

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify an image size, otherwise the web page might be difficult to load.

Width, Height or Style?

The width, height, and style attributes are all valid in HTML5. However, it is recommended to use the style property because it helps prevent the Style Sheet file from resizing the image.

 < img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> < img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Images are in another folder

If not specified, the browser will look for images in the same folder as the site. If you are storing images in a subdirectory, you must include the directory name in the src attribute.

< img src="/photos/html5.gif" alt="HTML5 Icon"style="width:128px;height:128px;">

The image is on another server

Some websites store images on their own servers. In fact, you can access images from any web site in the world.

< img src="https://www.tipsmake.com/hinhanh/tipsmake_html.jpg" alt="tipsmake.com">

Animation

HTML can display animated images (GIF).

< img src="tipsmake.gif" alt="tipsmake" style="width:48px;height:48px;">

Images act as paths

To use an image as a link, insert the tag  Picture 2 of Image img in HTML inside the tag 

< a href="default.asp"> < img src="hihi.gif" alt="how to HTML"style="width:42px;height:42px;border:0;">

Note: border: 0; added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

Floating image

The float property in CSS is used to make an image float to the right or left of text.

< img src="hihi.gif" alt="smile ioom" style="float:right;width:42px;height:42px;"> This image will float to the right of the text. 

 src="hihi.gif" alt="smile icon" style="float:left;width:42px;height:42px;"> This image will float to the left of the text. 

Image Map Creation

Card   Used to define the image-map, the image has areas that, when clicked, have an effect, depending on your choice. Try clicking on your computer, phone and coffee cup in the image below to see what happens:

This is the code of the full .htm file, you can copy it to notepad, save it as a .htm file, and run it on your computer.

Make tech easier

Click on your computer, phone, or coffee cup in the picture to go to the new page and read more about the topic:

 < img src="https://img.tipsmake.com/photos/image/2018/05/25/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> 

The tag's name attribute   attaching to the tag's usemap attribute  Picture 3 of Image img in HTML creates a relationship between the image and the map. Element  image-map.

Background image

To add a background image on an HTML element, use the CSS background-image property.

Add a background image for the page, using the background-image property on the BODY element.

To add background images on paragraphs in HTML, use the CSS background-image property.

Add a background image to the page, using the background-image property on the P element.

...

Element

HTML5 has additional elements   to add flexibility when defining image sources.

Element includes the number of elements  Each element references different image sources. This way the browser selects the image that best suits the current viewing and / or device.

Each element  has properties that describe when to merge the best image. The browser will use the element  first matches the attribute value, ignoring elements  after.

Display roses if the viewport is at least 650px and white flowers if it's at 465px.

 < img src="hoa-xanh.jpg" alt="Flowers" style="width:auto;">

Note: Always use the element  Picture 4 of Image img in HTML as the last child in the element  . The element  Picture 5 of Image img in HTML  is not supported by browsers   used, or otherwise card  Whichever suits.

Read the HTML screen

Screen reader is software that reads HTML code, converts text, allows users to 'hear' the text. Screen reader is very useful for visually impaired people.

Kareem Winters

Update 25 May 2019