W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


Share it

img intro img optional img occurrences img browser display img parents server-side image map (ismap) vs client-side image map (usemap) img syntaximg alt attributeimg ismap attributeimg usemap attributeimg width, height attributesimg src attributeimg accesskey attributeimg class attributeimg draggable attributeimg hidden attributeimg id attributeimg lang attributeimg style attributeimg tabindex attributeimg title attributeimg translate attribute

HTML5 img element

The img element allows you to embed non-interactive static or dynamic images into your HTML document. »video

About img

Display & support img

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, img

Attributes img

ismap vs usemap

The difference between a server-side image map (ismap) and a client-side image map (usemap) »video

Syntax img

1<img> »video

Attributes and Values img (comma separated)

<imgattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.alt=text»video<img src="images/puppy.jpg" alt="a grey puppy
standing in the middle of a room
2.crossorigin="",  , anonymous, use-credentials-<img src="URL" alt="image description" crossorigin>
3.ismap="",  , ismap»video<img src="sitemap.jpg" alt="image description" ismap>
4.usemap=#value_of_name_attribute_of_map_element»video<img src="blue" alt="blue" usemap="#value">
5.height= pixels»video<img src="blue" alt="blue" width="50" height="70">
6.width= pixels»video<img src="blue" alt="blue" width="50" height="70">
7.src=URL»video<img src="images/puppy.jpg" alt="a grey puppy
standing in the middle of a room
8.srcset=string (URL descriptors, URL descriptors)-<img src="puppy.jpg" alt="description.."
srcset="puppy-small.jpg 20w 20h 2x, puppy-big.jpg 250h">
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<img accesskey="h">
2.class=class name»html »img<img class="class_name">
3.contenteditable="",  , true, false »html<img contenteditable="true">
4.contextmenu=menu id value»html<img contextmenu="menu_id_value">
5.data-*= value -<img data-http-error="404">
6.dir=ltr, rtl, auto»html<img dir="ltr">
7.draggable= true,  , false»img<img draggable="false">
8.dropzone= copy, move, link, string:, file: -<img dropzone="copy">
9.hidden= "",  , hidden»html »img<img hidden="hidden">
10.id=id name»html »img<img id="unique_id_name">
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<img lang="en">
17.spellcheck="",  , true, false»html<img spellcheck="true">
18.style=CSS property:value»html »img<img style="border:2px solid #0000ff;">
19.tabindex= integer »img<img tabindex="3">
20.title=text»html »link»style »abbr»dfn
»img »meter
<img title="html page">
21.translate="", yes, no»html »img<img translate="yes">
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration img element

HTML5 img element: adding images

min video details
00:08 video tutorial: <img> tag:
embedding a static and a dynamic image into our HTML page
00:14 embedding non-interactive images: static an dynamic
00:15 1. embedding a non-interactive static image
00:21 adding the <img> tag in page
00:26 the <img> element allows us to embed images into our HTML document
00:30 adding the src attribute to <img> tag: this allows us to add the path of the image we want to embed
00:38 Save: CTRL+S
00:40 Refresh: F5
00:41 the embedded static image displays in our HTML page
00:46 adding the alt attribute to <img> tag since it's a required attribute
00:53 2. embedding a non-interactive dynamic, animated image
00:56 CTRL+C = copy
CTRL+V = paste
00:59 adding the path of the dynamic image as value of the src attribute
01:07 changing the value of the alt attribute
01:09 Save
01:11 refresh
00:13 the embedded dynamic image displays
01:07 note: the images to embed must be non-interactive
01:24 conclusion: the <img> tag allows us to embed non-interactive static or dynamic images into our HTML document

For more information about the img element, please see the specs: W3CWHATWG