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.

3.5 ★ | 2 Vote

May be interested

  • Format text in HTMLFormat text in HTML
    format elements in html help determine the style and importance of text.
  • Elements in HTMLElements in HTML
    the html element usually goes in pairs, including the opening tag, closing tag, and the content inside the two tags.
  • Symbol - Icon in HTMLSymbol - Icon in HTML
    html has many mathematical, technical and monetary symbols that cannot be used to write.
  • Common HTML mistakes that you should avoid for better web programmingCommon HTML mistakes that you should avoid for better web programming
    learning html is not difficult, but when running it in the browser, errors often occur. here are common html errors and how to handle them for better web development.
  • How to insert spaces in HTMLHow to insert spaces in HTML
    this tutorial explains how to insert spaces and line breaks in html. because no matter how many times you type a space, html will display a space so to insert more than one space, you will need to use the html tag.
  • Attributes in HTMLAttributes in HTML
    properties are used to add information to elements in html.
  • The id attribute in HTMLThe id attribute in HTML
    in html, the id attribute is used to specify a unique id for an html element (the value must be unique in the html file).
  • How to Get the Hex Code of a Color on Your Computer ScreenHow to Get the Hex Code of a Color on Your Computer Screen
    colors are identified in html and css by their hexadecimal codes. if you're creating a webpage or other html project and want to include an element that matches a particular color in an image, website, or program window on your computer...
  • Table in HTMLTable in HTML
    what does it take to create a table in html? is it complicated? want to add color to the table border, how to add the background color to the text in the table? in this article tipsmake.com will answer those questions and guide you to basic operations with tables on html, in addition to adding alternate color schemes for rows in the html table. invite you to follow along.
  • Title in HTMLTitle in HTML
    it is very important to use the title to show the text structure. heading (html) in html is identified by tags marked from to, of which the most important title is the least important.