Thứ Tư, Tháng Hai 12, 2025
spot_img
Homeimg image in HTML

img image in HTML

Adjust image size in HTML not difficult. Here are the details Simple way to resize HTML images with everyone.

In this article, we will learn together about HTML Image, how to add images to HTML, along with knowledge about deploying and using it through each specific example.

Previously, in the early days, websites only contained text content. This makes them quite boring and uninteresting. Over time, programming technology has increasingly discovered that modern websites can now embed photos and even videos inside to attract more visits. All thanks to smart tags in HTML. With photos, img tags are indispensable.

In the tutorial below, you will learn how to add images to your website to attract more viewers and many other methods of inserting images using img in HTML. Basically, you have 2 ways:

  • Via the link or full URL to access the file online.
  • Provides the file path relative to the location of the current website file.

Image syntax in HTML

In HTML, images are defined by tags

Card is an empty tag, containing only attributes and no closing tag. Attributes src Specifies the URL (web address) of the image.

alt attribute

Attributes alt Used to add descriptive text to images. If for some reason the user cannot view the photo (due to weak network, attribute error src or use a screen reader).

The value of the alt attribute is the image description.

Network Administration website

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

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

Image dimensions – width and height

Use attributes style to determine the height and width of the image.

Technology website

Also you can use attributes width and height.

Technology website

Attributes width and height Always define the width and height of an image in pixels.

Note: Always specify the image size, otherwise it may be difficult for the website to load the image.

Width, Height or Style?

Attributes width, height and style are all valid in HTML5. However, it is recommended to use attributes style because it helps prevent the Style Sheet file from changing the size of the image.




HTML5 IconsHTML5 Icon

The images are in another folder

If not specifically specified, the browser will look for the image in the same folder as the page. If you store images in a subfolder, you must include the folder name in the properties src.

HTML5 Icons

The image is on another server

Some websites store photos on private servers. In fact, you can access images from any web address in the world.

Quantrimang.com

Animation

HTML can display animated images (GIF).

Computer

Images act as links

To use an image as a link, provide a tag into the card


HTML Tutorial

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

Embossed image

Characteristic float In CSS, it is used to make images float to the right or left of text.

Smiley face Hình ảnh này sẽ nổi về bên phải văn bản.

Smiley face This image will float to the left of the text.

Create maps using Image Map images

Card is used to define image-map, an image with areas that when clicked will have some effect, whatever you set. For example, with the following image, we will place click areas where the computer, phone and coffee cup are:

Workplace

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





Quantrimang.com

Click vào máy tính, điện thoại hoặc cốc cà phê trong ảnh để đi đến trang mới và đọc nhiều hơn về topic:

WorkplaceComputerPhoneCup of coffee

Attributes name of card attached to the tag's usemap attribute create a relationship between the image and the map. Element

includes cards

Defines clickable areas in the image-map.

Background image

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

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


Hình nền

To add a background image on a paragraph in HTML, use the CSS property background-image.

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


...

Element

HTML5 has additional elements for added flexibility when specifying image sources.

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

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

Shows a rose image if the viewport is at least 650px and a white flower image if it is at least 465px.

Flowers

Note: Always use elements as the last child element in the element . Element is used by browsers that do not support the element use, or otherwise card Whichever is suitable.

Read HTML screen

A screen reader is software that reads HTML code and converts text, allowing users to “hear” the text. Screen readers are very useful for visually impaired people.

Caption photos with numbers

Speaking of captions, there are many ways you can add captions along with images. There's nothing stopping you from doing this because it's very easy to do in HTML.

For example:

Head and body of dinosaur skeleton;  it has a large head with long sharp teeth

Khủng long T-Rex trưng bày ở bảo tàng đại học Manchester.

That's it. It contains the content you need and can be styled with CSS. But there is a problem here: there is no semantic link between the image and the caption. That may cause screen reading problems. For example, when there are 50 images and captions, which caption should go with the image?

A better solution is to use components

and
in HTML. They are created for this purpose. Sample code is as follows:

Head and body of dinosaur skeleton;  it has a large head with long sharp teeth
T-Rex trưng bày ở trường đại học Manchester.

In short, card used to add or embed images on a web page. The “img” tag is an empty tag. That means it can contain just an attribute list and no closing tag. Adding photos improves quality and enhances the design and visual structure of the website. Currently, the website does not directly add images to the web platform because images are linked to each web page using tags More convenient and has enough space to accommodate large photos.

Outstanding attributes of the card Need to remember:

  • Src Specify the path to the image.
  • Alt contains alternative content for the image.
  • Crossorigin used to import images from third-party sites, allowing cross-origin access to be used with canvas.
  • Height Determines the height of the image.
  • Width Determines the width of the image.
  • Ismap Specify an image as the server-side image map.
  • Loading used to specify whether the browser should delay loading the image until some condition is met or load the image immediately.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments