Marilyn Perry's Notes On Images Inline Within Text

Creating an HTML riff that works well for including images inline with text involved some experimentation. Although numerous HTML and CSS reference websites exist, none of the examples provided on such websites, or elsewhere included all of the necessary features and attributes assembled into a complete reusable HTML with CSS unit.

Although it's probably workable to create the Cascading Style Sheet (CSS) declarations separate from the inline image, it's been convenient to simply copy-paste the needed HTML riff into an appropriate location within an article's text flow with all its needed CSS in place. The width of the image is defined as a percentage. Most often, adjusting the width of the image by changing the percentage value is all that required for visually attractive image positioning. In addition to the adjusting the width of the image, the alternative text for the image, and the image description in the caption, need to be edited.

<figure style="border:thin solid silver;float:left;font-size:smaller;margin:0.5em 0.5em 0.5em 0;padding:0.5em;text-align:left;text-indent:0;width:30%;">

    <img src="https://www.marilynperry.com/sites/default/files/images-articles-inline/mpdev10-Tambako-budgerigar-parrot-bird-1168399-1200x800-000.jpg" alt="Image Alternative Text" width="100%" height="100%">

    <figcaption style="border-top:thin solid silver; margin-top: 3px;"> <i>Figure 1. Image Description.</i> 

</figcaption>

</figure>

The HTML with inline CSS recipe presented above is used throughout this website to included image figures inline with article text. Curiously, the Drupal Real Time SEO module indicates that inline images may increase the Search Engine Optimization (SEO) score that search engines apply to a website page. 

Thank you for visiting this website, my personal website, and hopefully your enjoyment the information and content shared here publicly at www.marilynperry.com. Marilyn Perry | Sunday, December 10, 2023