Learn about HTML image tag - HTML Tutorial - Punchitech


This website uploads some web development tutorials, like HTML, CSS, JavaScript, and Bootstrap also PHP and more stuff about web development.

Nov 30, 2019

Learn about HTML image tag - HTML Tutorial

HTML image

Use <img>tags to define images in HTML pages. <img>Tags have two required attributes: srcand alt.

HTML image tag

HTML image-image tag (<img>) and source attribute (Src)

In HTML, images are <img>defined by tags.<img>Is an empty tag, meaning that it contains only attributes and no closed tags.

To display an image on a page, you need to use the source attribute ( src). srcRefers to "source". The value of the source attribute is the URL address of the image.

The syntax for defining an image is:

<img src="url" alt="some_text">
URL refers to where the image is stored. If the image named "boat.gif" is in the images directory of www.punchi.tech, the URL is //www.punchi.tech/images/boat.gif

The browser displays the image where the image label appears in the document. If you place the image tag between two paragraphs, the browser will display the first paragraph first, then the picture, and finally the second paragraph.

HTML image-Alt attribute

altAttributes are used to define a series of prepared alternative text for the imagePractice using attributes in programming testsalt .

The value of the replacement text attribute is user-defined.

<img src="boat.gif" alt="Big Boat">
When the browser fails to load the image, the replacement text attribute tells the reader what they have lost. At this point, the browser will display this alternative text instead of the image. It's a good practice to add replacement text attributes to all images on the page. This helps to better display the information and is very useful for those using a plain text browser.

HTML image-set the height and width of the image

heightThe (height) and width(width) properties are used to set the height and width of the image. You can resize an image during a programming test.

The default unit of the property value is pixels:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
Tip: It 's a good habit to specify the height and width of the image. If the image specifies a height and width, the specified size is retained when the page loads. If the size of the image is not specified, the overall layout of the HTML page may be destroyed when the page is loaded.

Set image border

In <img>labels you can use borderattributes to specify the thickness of the border in pixels. A thickness of 0 means no border around the picture.

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">

Set image alignment

By default, the image will be displayed on the page as left-aligned. In the <img>label, you can use the alignproperties to set the alignment of the image: center(center) or right(right).

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">

Basic considerations-useful tips:

Note: If an HTML file contains ten images, in order to display this page correctly, 11 files need to be loaded. Loading images takes time, so our advice is: Use images with caution.
Note: When loading the page, pay attention to the path of the inserted image. If the position of the image cannot be set correctly, the browser cannot load the image, and the image tag will display a broken image.

HTML image tags

Tags Description
<img> Define image
<map> Define image map
<area> Define a clickable area in an image map