How To Wrap Text Around Image
Posted: Tuesday, November 17, 2009
by Sandee Lembke
Theme Party Queen.com
One of the most challenging things that a new webmaster has to learn when building webpages is how to wrap an image around text.
The most common problems include text creeping too close to images and images not being aligned properly both horizontally and vertically when placed next to text.
Always Start With The Same Image Code
- The image location (Example--"http://www.your-domain-name.com/images/your-image-name.jpg")
- Alignment (Example--left, right, center)
- Hspace (For horizontal alignment)
- Vspace (For vertical alignment)
- Alt Tag (To help search engines find your image/site)
- Image Height and Width (To ensure proper display of your image without distortion)
- Title Tag (So visitors will see an image description when they hover over an image)
- Border HTML Code (In case you want a border around your image)
- How to Wrap Image Around Text
When you want to wrap an image around text, decide which side of the page the image or ad should appear. If you want it on the right side use ALIGN="right". Other choices are "left" or "center".
Next, adjust Hspace to gain space between the text and the image. Start with Hspace="10" and adjust as needed. Vspace is not as commonly used as Hspace but it comes in handy when you want to move an image up or down vertically. Start with "10" and adjust as needed.
Using ALIGN, HSPACE and VSPACE are the primary wrap text code needed when you want to wrap an image around text.
Using The Break Tag
Occasionally you will want to create space between the bottom of your image and where the text begins again. Using the break tag will accomplish this task. The most common break tag for this purpose is clear="all."
Other Parts of HTML Image Code
The Alt tag is extremely important. Using a keyword-rich alt tag will help search engines find your images and also your site. The Title tag is only needed if you want your visitors to see an image description when they hover over your images.
Specifying an image height and width will ensure that your images display properly, without distortion, in all browsers.
Lastly, adjust the border tag depending on what type of border you would like around your images. You can adjust weight (1 px is thin, 3 px is thicker), color and type (solid, dotted...). If you want no border, change border code to 0px.
Summary
- Use the same HTML Image code repeatedly and adjust as needed.
- To wrap text around an image use ALIGN, HSPACE and VSPACE.
- To gain space between the bottom of an image and more text, use the break tag
- Although they do not affect alignment, always use an Alt Tag and specify height and width
- Optional--use Title Tag and Border as needed
Get the exact HTML wrap code needed to get it right the first time.
This Article has been viewed 523 times. (Not updated in real-time.)
Top-level comments on this article: (2 total)Dear Sandee, thank you for sharing this information here. I find it resourceful and helpful, especially as i was searching for a way to wrap text around an image.kash
Excellent. Very helpful! Adding sample code to this will help more.
We want your comments! If you can read this, you don't have javascript enabled, so you can't use this comment system. Please enable javascript.