Need to Wrap Image?

**DoubleDee** · Dec 31, 2011 16:00

I am building an Articles Index which has a short summary paragraph of an Article, and to the left is a thumbnail image which help to illustrate what the Article is about. The Image is also hyperlinked, so clicking on it takes you to the Article as does clicking on the Article Summary Heading.

So anyways...

Is there a need to "wrap" an Image in tags (e.g. <p>, <div>) or can it just be free-standing?

(I suppose technically my <img> needs to be wrapped in <a> tags, but beyond that...)

Here is what I did in the past...

HTML Code:

	<p class="image">
		<a href="<?php echo BASE_URL; ?>articles/postage-meters-can-save-you-money">
					<img src="<?php echo BASE_URL; ?>images/PostageMeter_200x200.jpg" width="200"
					alt="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons."
					title="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons." />
		</a>
	<p>

Thanks,

Debbie

**xhtmlcoder** · Dec 31, 2011 16:25

The IMG element has no content, is empty and inline thus it requires a container element typically a block-level element, so no it cannot be standalone.

**ralph.m** · Dec 31, 2011 16:35

In my view, it's best to have an inline element wrapped in a block element. The only time you're strictly not allowed to have an inline element on its own is as a direct child of the <body> element. But generally it is asking for trouble to have an inline element like an image hard up against a block element like a <p>. It can cause buggy browser rendering.

**DoubleDee** · Dec 31, 2011 19:09

Originally Posted by ralph.m

In my view, it's best to have an inline element wrapped in a block element. The only time you're strictly not allowed to have an inline element on its own is as a direct child of the <body> element. But generally it is asking for trouble to have an inline element like an image hard up against a block element like a <p>. It can cause buggy browser rendering.

The <a> element is also inline, right?

If so, then what should I use?

An image is neither a "paragraph" nor an element of a paragraph if you ask me.

Seems like using a <div> would be best?

Debbie

**ralph.m** · Dec 31, 2011 20:01

Originally Posted by DoubleDee

The <a> element is also inline, right?

Yes.

then what should I use? An image is neither a "paragraph" nor an element of a paragraph if you ask me.
Seems like using a <div> would be best?

Others around here disagree with me on this, but I have a more generous concept of what a paragraph is than most. Not that this is especially relevant, but linguistically, a paragraph is anything that is drawn or written alongside other things, so to me, it's perfectly fine to have an image wrapped in <p> tags. However, <p>s often have their own styling which can get in the way when wrapping them around an image (thus perhaps necessitating special classes etc.) so now I'm inclined to wrap the image in a div.

Mind you, it's not totally clear from your example above what the exact situation is, but it's fine to include an <img> in a <p> element that has text in it, just as you include <a> elements, so that's probably the best option is it suits your purposes.

**DoubleDee** · Dec 31, 2011 21:03

Originally Posted by ralph.m

Yes.

Others around here disagree with me on this, but I have a more generous concept of what a paragraph is than most. Not that this is especially relevant, but linguistically, a paragraph is anything that is drawn or written alongside other things, so to me, it's perfectly fine to have an image wrapped in <p> tags. However, <p>s often have their own styling which can get in the way when wrapping them around an image (thus perhaps necessitating special classes etc.) so now I'm inclined to wrap the image in a div.

Mind you, it's not totally clear from your example above what the exact situation is, but it's fine to include an <img> in a <p> element that has text in it, just as you include <a> elements, so that's probably the best option is it suits your purposes.

Okay, so let me describe in greater detail what I am building...

This page will be an Articles Index page.

For each Article, there will be an Thumbnail/Image on the left, and immediately to the right will be an Article Heading with an Article Summary (paragraph) below the Heading.

For each Article, will be this set up.

I am looking at something similar to what http://arstechnica.com/ does.

Follow me?

I actually had help building this about a year ago, but I am looking to clean up my code - which wasn't so hot - and figured it would be easiest to start from scratch.

Thanks,

Debbie

**ralph.m** · Dec 31, 2011 22:03

I would just use two divs, one floated left (for the image) and one floated right, for the the content. But there are many ways to do this. You could even argue that this is a list of entries and enclose those divs in a <li>, but it's up to you.

**Rayzur** · Dec 31, 2011 23:28

Originally Posted by DoubleDee

I actually had help building this about a year ago, but I am looking to clean up my code - which wasn't so hot - and figured it would be easiest to start from scratch.

I remember helping you with that back then. It was a four page thread that had some good input from several people in it.

If you remember, my final version used a div to wrap the image and byline (which was a span) as they were inline elements. Then the article text itself was in a <p> tag.

**DoubleDee** · Jan 1, 2012 01:17

Originally Posted by Rayzur

I remember helping you with that back then. It was a four page thread that had some good input from several people in it.

If you remember, my final version used a div to wrap the image and byline (which was a span) as they were inline elements. Then the article text itself was in a <p> tag.

Rayzur?! You are alive!!!!!!

(Been avoiding me?!)

Yes, I remember the thread, but things just look different a year later...

Here is what I came up with tonight...

HTML Code:

	<!-- Summary #2 -->
	<div class="articleSummary">
		<h3>Consider becoming an S-Corporation</h3>
		<div class="image">
			<a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">
				<img src="<?php echo BASE_URL; ?>images/S-Corp.png" width="100"
					alt="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons."
					title="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons." />
			</a>
		</div>
		<p class="published">Published: December 31, 2011</p>
		<p>When most people think of "corporations" they think of mega-companies like Wal-mart, Microsoft, General Motors, Citibank, 
		and so.  However the reality is that all it takes is one person to become a "corporation", and now might be the right time for your 
		small-business to consider making the switch.</p>
		<p>Incorporating your small-business isn't nearly as difficult or as expensive as you might think, and it offers benefits that may not
		be so obvious.  <a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">Learn how S-Corporations provide
		financial benefits and legal protection</a> that you need!</p>
	</div>

Code CSS:

/* ARTICLE INDEX Styles */
#boxArticleIndex{
	margin: 20px 220px 50px 0px;
	padding: 15px 50px 50px 50px;	/**/
	min-width: 520px;						/* 0px + 20px + 520px + 20px + 200px = 760px Min-Width */
	max-width: 960px;						/* 0px + 20px + 960px + 20px + 200px = 1200px Max-Width */
	clear: both;
	text-align: justify;
}
 
#boxArticleIndex h2{
	margin: -15px -50px 0 -50px;
}
 
.articleSummary{
	padding: 30px 0px;
}
 
.articleSummary h2{
	font-size: 1.2em;
}
 
.image{
	float: left;
	padding: 0 20px 0 0;
}
 
.published{
	margin: 0 0 -1em 0;
	font-size: 0.8em;
	font-weight: bold;
}

I just feel like this code could be stream-lined some more?! (I have been trying *really hard* to use minimalistic HTML and CSS to get the same effects that used to take me pages of code...)

I am wondering, for instance, if I really need the...

HTML Code:

		<div class="articleSummary">

Glad to see you back around, Rayzur. Oh, and Happy New Year!!

Sincerely,

Debbie

**Paul O'B** · Jan 1, 2012 05:47

Hi Happy New year

Rays example is more flexible if you have articles without images and the text can collapse more easily to the side. Your example will mean that text will eventually wrap under the image rather than stay aligned nicely to the right (which may or may not be an issue but often looks messy if the last line only wraps underneath).

There are many ways to do this but if you are always going to have an image showing and the structure is always the same then you can lose the extra image div and just put the image in the first p element and drag it left. Pad out all the p elements and they will stay clear.

e.g.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/* ARTICLE INDEX Styles */
.articleSummary { padding: 30px 0px; }
.articleSummary h2 { font-size: 1.2em; }
.published a {
	float: left;
	margin:0 0 0 -120px;
	position:relateive;/* IE fix - just in case*/
}
.articleSummary p {
	margin:0 0 1em;
	padding:0 0 0 120px;
}
p.published {
	margin:0;
	font-size: 0.8em;
	font-weight: bold;
}
img {
	display:block;
	background:red;
	height:100px
}/* for demo only */
</style>
</head>

<body>
<!-- Summary #2 -->
<div class="articleSummary">
		<h3>Consider becoming an S-Corporation</h3>
		<p class="published"><a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation"> <img src="<?php echo BASE_URL; ?>images/S-Corp.png" width="100" alt="Alternative text here" 	title="S-Corp.  Credit: John Doe, Wikimedia Commons." /> </a>Published: December 31, 2011</p>
		<p>When most people think of "corporations" they think of mega-companies like Wal-mart, Microsoft, General Motors, Citibank, 
				and so.  However the reality is that all it takes is one person to become a "corporation", and now might be the right time for your 
				small-business to consider making the switch.</p>
		<p>Incorporating your small-business isn't nearly as difficult or as expensive as you might think, and it offers benefits that may not
				be so obvious. <a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">Learn how S-Corporations provide
				financial benefits and legal protection</a> that you need!</p>
</div>
</body>
</html>

It all depends on how flexible you want it to be as to which approach you take.

Don't use the same alt and title text in the image as that will annoy screen readers greatly as they read out the same information twice. Also do not include the word picture or imafe in the alt text because screenreaders announce that it is an image before the text is read out so users don;t want to hear "Image", "Image of .....".

More info here.

User Tag List

Thread: Need to Wrap Image?

Thread Tools

Display

Need to Wrap Image?

Bookmarks

Bookmarks

Posting Permissions