We're using <figure> and <figcaption> tags to style our images throughout this resource. This isn't the only way to do it, but it's a best practice because it provides the correct semantic structure in the code, and for screen reader users the image and caption are associated with each other. If you don't need a caption, just eliminate the <figcaption> tags.
In the following examples, we use filler text to show you how the image and text will display for that alignment choice. We also provide code to "clear" the image because without it, the content you want below the image will be beside it.
Left-Aligned Image
<figure style="float: left; margin-left: 0; width: 30%;"><img src="Image Source URL" alt="descriptive text" width="100%" />
<figcaption>Image caption text</figcaption>
</figure>The width is defined in the <figure> tag, and you can adjust it. Using a percentage to define the width allows the image to resize.
Right-Aligned Image
<figure style="float: right; margin-right: 0; width: 30%;"><img src="Image Source URL" alt="descriptive text" width="100%" />
<figcaption>Image caption text</figcaption>
</figure>The width is defined in the<figure>tag, and you can adjust it. Using a percentage to define the width allows the image to resize.
Clearing Content
When aligning an image with text, you'll need to clear content after the image by using
- <pstyle="clear: right;"> for right-aligned images,
- <pstyle="clear: left;"> for left-aligned images, and
- <pstyle="clear: both;"> for either situation.
In our example, we use a<p>tag, but the clear code can also be added to a<div>or<h>tag, or whatever element is below the image.
See this documentation from Mozilla to learn more: Mozilla info on clears.
Best Practice: Add Alt Text to Images
Don't forget to add meaningful, concise alt text to informative images. The alt text serves as a replacement for the image if it fails to load or is read by a screen reader. It should not be the same as the image caption but should instead describe the information contained in the image so that someone can understand it even if they can't see it.
0 Comments
Add your comment