Building the User Interface by Using HTML5: Text, Graphics ... - server

36 | Lesson 2The figure element specifies the type of figure you’re adding, such as an image, diagram, photo,and so on. This element provides a major benefit: the ability to easily add multiple images side byside. With HTML 4, doing so requires a good bit of markup. The figcaption element isoptional. It adds a caption to an image on a Web page, and you can display the caption before orafter the image.The following markup uses the figure element, specifies the width and height of the image,and adds a caption. The result is shown in Figure 2-10:LICENSED PRODUCT NOT FOR RESALEHappy dogs are good dogsFigure 2-10Using the figure andfigcaption elementsto display an image with acaptionIllustration: © MightyIsland/iStockphotoThe following markup is for a figure with multiple images that share a single caption, theresults of which are shown in Figure 2-11:Happy dogs are good dogsFigure 2-11Using the figure andfigcaption elements todisplay multiple images side byside with a single captionIllustrations: © MightyIsland/iStockphoto