Image img in HTML
HTML image syntax
In HTML, images are defined with tags
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
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
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
as the last child in the element . The element 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.
You should read it
Maybe you are interested
Share how to fix Preview Pane error of not being able to view image files
How to display image alt text on Threads
SpaceX reveals series of images capturing impressive moments during the latest Starship test
How to use Apple Intelligence's Image Playground to create AI images
TikTok brings Getty Images to ads and AI-generated avatars
Create images for documents using Gemini in Google Docs