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…)
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.
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.
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.
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.
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 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.
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.
Yes, I remember the thread, but things just look different a year later…
Here is what I came up with tonight…
<!-- 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>
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…
<div class="articleSummary">
Glad to see you back around, Rayzur. Oh, and Happy New Year!! :Partydude:
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.
<!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 …”.
