The <img> tag is used to include images in our webpages. It has no closing tag. The "src" attribute specifies which image to load. The "alt" attribute provides text to be use if the image is not displayed (for example if our web page is viewed by someone using a screen reader). We can set a width or height (or both) using the "width" and "height" attributes.
We can nest our images inside a link element in order to make the image into a hyperlink.
HTML5 provides the <figure> element for including self-contained images, usually with a caption. "Self-contained" here means that we could move the image content to somewhere else (even another page) without disrupting the main flow of the content.
Given the vast array of different screen sizes in use today, and the different speed and quality of connections, it may be necessary to supply different size/quality images to different devices. The <picture> element, the <source> element and the "srcset" attribute present a solution to this problem. We'll look at this later.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a feugiat erat. Curabitur lacinia dolor magna, mollis efficitur sapien finibus tincidunt. Sed a dui vel erat ullamcorper laoreet sed lobortis eros. Aenean ut erat in augue condimentum ullamcorper. Vestibulum eget commodo urna, sed posuere mi. Cras molestie nisl nulla. Aliquam dictum neque ut nunc faucibus, nec blandit enim gravida. Nunc posuere suscipit felis, eget mattis lorem mollis id.
Nunc consectetur nec dui eget tincidunt. Duis suscipit dui ac nunc blandit, id sollicitudin augue efficitur. Quisque convallis iaculis imperdiet. In lobortis libero nibh, sed malesuada nibh finibus et. Ut justo nisl, pellentesque ut metus nec, aliquet sodales neque. Integer viverra scelerisque tortor nec fermentum. Vestibulum scelerisque purus urna, eget fermentum nisi scelerisque vitae. Vivamus ac urna sit amet lorem elementum vulputate. Curabitur rutrum ex elit, sed auctor neque suscipit blandit. Donec luctus diam odio, eu mattis metus maximus non. Nulla facilisi. Fusce ultricies nisl ut dapibus pulvinar. Duis quis neque feugiat nibh posuere eleifend ac sed sapien.
Nam vulputate neque vitae quam venenatis, non sagittis ipsum mollis. Duis eu hendrerit odio. Sed faucibus egestas libero, at dignissim metus accumsan in. Praesent aliquet malesuada turpis, ac accumsan neque feugiat id. Fusce a gravida enim. Donec eget semper purus. In non luctus ipsum, vel elementum elit. Donec sodales iaculis fermentum. Integer ut mattis nulla. Cras vulputate lacus pretium rutrum mollis. Duis varius nisl blandit neque sollicitudin, sed gravida ex cursus. Aenean tristique erat et nisi sagittis aliquam. Curabitur vitae dui blandit, lacinia tellus at, pretium quam. Aliquam suscipit pulvinar tellus. Phasellus ultricies scelerisque pharetra. Sed vestibulum nisi justo, sed suscipit metus efficitur eget.
Sed commodo vel urna in rhoncus. Integer iaculis elit neque, ac laoreet ligula tincidunt sed. Maecenas hendrerit ut tellus eu commodo. Quisque sed urna ut velit ornare ornare. Ut sodales augue vel venenatis porttitor. Nulla elit metus, rhoncus nec lorem vitae, pharetra dictum nibh. Sed blandit arcu eu dui cursus, non sodales nibh vulputate. Vivamus a sagittis erat. Suspendisse eget ipsum sit amet massa euismod facilisis eget ut tortor. Duis in sodales magna, aliquam volutpat nulla. Nulla dictum turpis et nibh facilisis condimentum.
Duis ut aliquam dui, quis semper orci. Maecenas maximus consequat lacus, et volutpat ante dignissim quis. Vivamus ac nibh vitae orci blandit placerat. In at leo nec velit facilisis ultricies. Fusce sodales libero vitae tellus sodales, pellentesque tristique diam egestas. Integer aliquam felis et ultrices viverra. Fusce id libero vitae erat faucibus rutrum quis ac lacus. In laoreet rutrum varius. Proin lectus lectus, tempus cursus eros varius, ultricies varius turpis. Ut sit amet ultrices nulla. Cras pretium hendrerit velit nec iaculis. Etiam ullamcorper tristique tellus a vehicula.