Learning HTML is fun, and adding images to your HTML pages makes them look so attractive and catchy! It is not wrong to say that a webpage on a website is not complete until it has some images added to them.
The <img> tag in HTML
The <img> tag, shortform for "image". It is one of the fundamental tag in HTML. <img> tag was introduced in the initial HTML specification, HTML 2.0, which was released in 1995.
The src attribute of <img> tag
The src attribute is the required attribute that has to be used along with the <img> tag. It is used to add the URL or file path of the image that you want to be displayed.
Our HTML First Image Example
-
my-dog-page.html
<html>
<head>
<title>My Dog's Webpage</title>
</head>
<body>
<h1>My Dog!</h1>
<img src="https://code2care.org/howto/change-css-background-opacity-examples/images/dog-profile-image.jpg"/>
</body>
</html>
Let's see how our first images look on the web browser.
Setting width and height to HTML Image
Though our image looks good, don't you think it needs to be resized? We can do that using the width and the height attributes.
<img width=300 height=300 src="https://code2care.org/howto/change-css-background-opacity-examples/images/dog-profile-image.jpg"/>
The image looks perfect now!
Add alternative text on hover on HTML image
To add an alternate text when you hover on the image or to be displayed if the SRC path or URL is broken we can make use of the alt tag
<img alt="This is my dog Oscar!" width=300 height=300 src="/broken/images/dog-profile-image.jpg"/>
List of all attributes supported by HTML img tag
Attribute | Usage |
---|---|
alt | To provides alternative text for the image |
src | To specify the URL or file path of the image |
srcset | To specify multiple sources for the image |
sizes | To specify image sizes for responsive design |
crossorigin | To specify how the image handles cross-origin requests |
usemap | To specify an image map for clickable regions |
ismap | To specify an image as a server-side image map |
width | To specify the width of the image |
height | To specify the height of the image |
loading | To specify the image loading behavior |
decoding | To specify the image decoding behavior |
align | To specify the alignment of the image within text |
hspace | To specify horizontal space around the image |
vspace | To specify vertical space around the image |
border | To specify the border size around the image |
longdesc | Provides a URL to a long description of the image |
usemap | To specify an image map for clickable regions |
ismap | To specify an image as a server-side image map |
referrerpolicy | To specify the policy for sending referrer information |
loading | To specify the image loading behavior |
decoding | To specify the image decoding behavior |
importance | To specify the image rendering priority |
intrinsicsize | To specify the intrinsic size of the image |
title | To specify a title or tooltip for the image |
aria-* | Various attributes for accessibility purposes |
data-* | Custom data attributes for storing extra information |
class | To specify one or more class names for the image |
style | To specify inline CSS styles for the image |
id | To specify a unique identifier for the image |
name | To specify a name for the image (useful for forms) |
role | To specify the role of the image in the document |
tabindex | To specify the tabbing order of the image |
accesskey | To specify a shortcut key for the image |
draggable | To specify whether the image is draggable |
hidden | To specify whether the image is visible or hidden |
contenteditable | To specify whether the image's content is editable |
spellcheck | To specify whether the browser should check spelling |
autocorrect | To specify whether the browser should auto-correct |
autocapitalize | To specify how the browser should capitalize the image |
dir | To specify the text direction for the image |
lang | To specify the language of the image |
translate | To specify whether the image should be translated |
role | To specify the role of the image in the document |
aria-* | Various attributes for accessibility purposes |
List of most common HTML Image file formats
Image Format | File Extensions |
---|---|
JPEG | .jpeg, .jpg |
PNG | .png |
GIF | .gif |
BMP | .bmp |
TIFF | .tif, .tiff |
WebP | .webp |
SVG | .svg |
ICO | .ico |
APNG | .apng |
HDR | .hdr |
EXR | .exr |
HEIF | .heif, .heic |
PSD | .psd |
AI | .ai |
EPS | .eps |
RAW (Camera) | .raw |
PICT | .pict |
XBM | .xbm |
Facing issues? Have Questions? Post them here! I am happy to answer!
Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.
Follow him on: X
You can also reach out to him via e-mail: rakesh@code2care.org
- How to remove old 404 pages ulrs from Google crawler
- W3 HTML validator warning Unable to Determine Parse Mode
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- Align html element at the center of page vertically and horizontally
- HTML Images - Attributes and Formats
- 9 Border to DIV Element in HTML Examples
- Create HTML button that looks like a href hyperlink
- What is the doctype for HTML5?
- Simple Crossword Puzzle example using Pure HTML, CSS and JavaScript
- How to make a div tag clickable
- The author stylesheet specified in tag script is too long - document contains 21759 bytes whereas the limit is 10000 bytes
- W3 : character data is not allowed here html validation error
- How to set background color in HTML page?
- Auto Refresh Webpage after every x Second or Minute using Meta Tag?
- Default speed of Marquee tag : SCROLLAMOUNT
- Get HTML table td, tr or th inner content value with id or name attribute
- How to add multiple spaces between html page text
- Chessboard with pieces using pure HTML and CSS
- How to turn off autocomplete in input fields in HTML Form
- remove div vertical scroll
- Fibonacci series from 1 to 500 table
- Remove Html head and body tags from ckeditor source
- reCaptcha Verification expired. Check the checkbox again
- HTML5 CSS3 Color Codes List
- All directional arrows codes for HTML
- How to fix Jenkins Plugin Stuck in Uninstallation pending Status - Linux
- Python: Merge DataFrames Pandas Outer Join Example - Python
- Cannot load PowerApps form in SharePoint Online due to repeated authentication - SharePoint
- Add scroll to div element in HTML Css - CSS
- Fix: Jupyter Notebook Black Web Page on Localhost - Python
- How to Change Bootstrap Carousel Slide Speed - Bootstrap
- How to create StackOverflow error in java - Java
- Efficient way to perform HTTP cURL GET/POST Requests with Payload - cURL