Images, Figures, and Pictures in HTML

This video covers the different ways that you can add images to web pages as images, figures, or pictures.
The different HTML elements and their attributes are discussed.
Code GIST: gist.github.co...

[@theman7050]

Greattt

[@kiwiya]

Amazing thank you very much

[@danillomello87]

Muito bom, simples e claro. Very good. Simple and clear.

[@shellamelexterminador6502]

amaizing tutorials all videos, thanks Steve

[@devT44]

If img is an inline element, then how it's different from an inline-block element?

[@SteveGriffith-Prof3ssorSt3v3]

inline-block lets you set properties that are associated with block elements like margin and width. Take a look at this page as an example gist.github.com/prof3ssorSt3v3/5fa29c9d678e71103ef2b25dce2c76d9

[@cakradanusedayu910]

hi, it's really great explanation about img figures and pictures.. thank you very much..

[@hiteshsuthar6176]

Thank you so much

[@webb-developer]

✅ image , figure done pic for later

[@frozen_tortus]

This is explained very well. Thanks Steve! I wonder is it correct to use figure as part of a typical card?

[@SteveGriffith-Prof3ssorSt3v3]

That depends on what type of image that you are putting on the card. A figure is generally an illustration with a label/caption.

[@frozen_tortus]

@@SteveGriffith-Prof3ssorSt3v3 Oh I see now. Thanks

[@damo190]

is a inline or inline-block element? I thought it's an inline-block element because we can add height. But I saw it's an inline element as mentioned in w3schools. So I am confused.

[@SteveGriffith-Prof3ssorSt3v3]

Do NOT trust w3schools. They constantly have incorrect information or miss key points. Images are inline-block.

[@keradan]

Thanks a lot. Can I use the figure tag with a picture instead of img inside it?

[@SteveGriffith-Prof3ssorSt3v3]

You can put a picture tag inside a figure tag. However, the picture should always have an img tag inside it.

[@keradan]

Steve Griffith great, thanks

[@shayama]

So if I dont use capion for image I can use just img src? Is it gonna be like should be? :) I was thinking that we should use picture to define few images with different exension. In that way every browser can choose what type can use. And width and height should be defined in css also for rwd. Can u write something what do you think? Thank you.

[@SteveGriffith-Prof3ssorSt3v3]

Like everything, it depends on the context. If you only have one version of an image, use ``. If you are doing art direction and responsive design and have multiple versions of an image, use the `` element with `` elements that have the media queries. This will also include the ``. If you want to make it a figure (an image with a caption) then wrap it all in a `` and add the ``

[@shayama]

@@SteveGriffith-Prof3ssorSt3v3 Thank you for your respond :)

[@zipponvr7043]

in here 4:26 - it was sound of your cat? ))

[@SteveGriffith-Prof3ssorSt3v3]

Might be. Could also be neighbour's grandkids through the open window.