Intel XDK: Controls 3: HTML5 and the image widget in Intel XDK

figure is the new HTML element in HTML5 and it contains figcaption element which is also new in HTML5. image is only one of the things that can be represented by figure.

You use the image widget in the CONTROLS/COMMON section of Intel XDK.


You just drag this from COMMON and drop it on  the page (as you enter the page you should see a broad orange border around the active area). By default the Strabburg.jpg gets entered as the image as shown.


With the following properties that you can use:


The html code for this inserted image is:


The scale-image style specifies a width of 200px of unspecified height

If we modify the properties as shown:


The HTML gets modified as shown:


The W3C recommendation for the image is the following (

Quoted from the above source:

"In some cases an image is included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum requirement is to provide a caption for the image using the figure and figcaption elements under the following conditions:
    The img element is in a figure element
    The figure element contains a figcaption element
    The figcaption element contains content other than inter-element whitespace
    Ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element whitespace, and no embedded content descendant other than the img element.
In other words, the only content of the figure is an img element and a figcaption element, and the figcaption element must include (caption) content.
Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute."

TAB BAR Control in App Framework 7 here:
Post a Comment

Popular posts from this blog

Develop a Side Menu App using Intel XDK - Part 1

UWP: XAML's ListView Control and its SelectionChanged event - Part 1

Setting up Kid's Corner on Windows 10 Phone