HTML CSS Bootstrap Javascript Icons Python
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types
All HTML Tags
<!-- --> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <img> tag

The HTML <img> element embeds an image into the document.

The <img> element is an empty element which means that it has no end tag.

Run code

The URL of the image source is specified in the src attribute.

Browser compatibility

The <img> element is fully supported by all browsers:

Element
<img> yes yes yes yes yes



Attributes

The following table shows the attributes that are specific to the <img> tag:

HTML5 is new in HTML5

Attribute Value Description
align top
bottom
middle
left
right
Not supported in HTML5.
Specifies the alignment of an image according to surrounding elements
alt string Specifies an alternate text for an image
border pixels Not supported in HTML5.
Specifies the width of the border around an image
crossorigin anonymous
use-credentials
Allow images from third-party sites that allow cross-origin access to be used with canvas
height pixels Specifies the height of an image
hspace pixels Not supported in HTML5.
Specifies the whitespace on left and right side of an image
ismap ismap Specifies an image as a server-side image-map
longdesc URL Specifies a URL to a detailed description of an image
sizes   Specifies image sizes for different page layouts
src URL Specifies the URL of an image
srcset URL Specifies the URL of the image to use in different situations
usemap #mapname Specifies an image as a client-side image-map
vspace pixels Not supported in HTML5.
Specifies the whitespace on top and bottom of an image
width pixels Specifies the width of an image

Global Attributes

The <img> tag supports the global attributes described in HTML Global Attributes Reference

Event Attributes

The <img> tag supports the event attributes described in HTML Events Reference


More Examples

It's simple to use an image as hyperlink. We just need to use an image inside <a> element at the place of text as shown below:

Run code

The following example shows how to create thumbnail images using CSS:

img-thumbnail
img-thumbnail
img-thumbnail
Run code

The following example shows how to create image card:

Caption text
Caption text
Run code

The following example shows how to create rounded corner images using CSS:

img-rounded
border-radius: 8px;
img-circle
border-radius: 50%;
img-rounded
border-radius: 25px;
Run code

Last updated: Tuesday 25 Sep, 2018