Summary 6 | Chapter 5 & 15
Adding Images
To add an image to a webpage, use the <img> element with the "src" attribute to specify the image file's location, and the "alt" attribute to provide a text description of the image. The "title" attribute can also be used to provide additional information about the image. Alt text should accurately describe the image for accessibility purposes. If the image is purely decorative, the alt attribute should still be used but left empty.
Figure and figure captions
HTML5 introduced the <figure> element to associate images with their captions, using the <figcaption> element to add a caption to an image. Multiple images can be placed in a <figure> element if they share the same caption. Older browsers that don't recognize these elements will ignore them and display their content as normal.
Using Float
The float property is commonly used to place boxes next to each other in web layouts. However, floated elements can affect the placement of following elements, as shown in an example where six floated paragraphs are displayed. The fourth paragraph doesn't float to the left as expected because the second paragraph is in the way. Setting the height of the paragraphs to be the same height as the tallest paragraph may solve this issue, but it's not always practical in real-world designs. The clear property is a more common solution to this problem.