Images - Paragraphs - HTML5
Paragraphs and Images
Here are the methods used for left, right and center placement in paragraphs.
There are also inline methods for placement.
Aligning Pictures to Left of Text
In HTML5 Use:
<p><img src="imagename" alt="alt text" style="float: left">Text here</p>
In this paragraph the alignment attribute of the image is set to float:left.
When the float left property is chosen text will flow to the right of the image.
If it is a large image, ensuing paragraphs and elements like h1-h6 will also flow to the right of the image.
We prevented that from happening on this page by placing a the following code after the desired amount of text that we wanted beside of the image.
<p class="clear"> </p> The CSS: p.clear {clear: both}
Aligning to Pictures Right of Text
In HTML5 Use:
<p><img src="imagename" alt="alt text" style="float: right">Text here</p>
In this paragraph the alignment attribute of the image is set to float:right. When the float right property is chosen text will flow to the left of the image.
If it is a large image, ensuing paragraphs will also flow to the left of the image.
See also: The float Property
Images and HTML5 Web Pages
Do not add height and width dimensions to your images. This is a deprecated requirement.
<img src="imagename" width="200px" height="100px" alt="alt text" />
Add margins to your image using css to keep text from laying against it.
Use CSS to add or remove borders, round corners or place box shadow.
Centering Images
Here's the HTML code for centering a naked image:
<img src="imagename" style="display:block; margin: 0 auto" alt="alt text">
Do not set the image in a paragraph unless you center it.
Inline Images
You've seen the instruction manuals that place icons in the text of a paragraph.
HTML5 makes it very simple to do this.
IndigoAmpp includes an option during installation for attaching the start up icon 
to the task bar.
The HTML5 code:
<p>IndigoAmpp includes an option during installation for attaching the start up icon <img src="images/start-up-icon.PNG" style="border: 0; display:inline; margin: 0 2px; box-shadow: none" alt="start up icon">to the task bar.</p>
Use of Classes
Rather than using inline code, a better option for adding the style settings would be to create customized classes.
You might use imager for right aligned images, imagel for left aligned and imagec for centered.
Note: When placing images in web pages, always use optimized, interlaced images. Large bulky image files will cause your pages to display very slowly. Size of files can be reduced by limiting them to the least amount of colors that will allow the image to display properly. Interlacing gives the appearance of an image loading in layers. If the image is slow in loading the user will see something on the screen rather than just a blank page. Interlaced images don't normally load faster than non-interlaced, but they do give that appearance.
Need as good free tool for optimizing your images? Download the latest edition of PhotoScape. Find it on your favorite search engine.