PDA

View Full Version : img tag placement


Stewart
9th Oct 2009, 11:10 am
To be inline with XHTML 1.0-strict should an image tag always be placed inside another element such as a paragragh or heading to imply a content relationship? Or can it stand on its own between other elements ?
David
9th Oct 2009, 02:34 pm
Good question. Despite the fact that (by default) images are inline elements, there is no requirement for them to be contained within a parent element. No meaningful relationship is implied by doing so and you'll find that designers tend to use images both inside and outside of block-level elements like paragraphs depending on circumstance rather than to add meaning. The issue is further clouded by the fact that it is possible to transform images into block-level elements using CSS.
Stewart
9th Oct 2009, 04:22 pm
Thanks, so now I have another question... I have an image tag sat between a completed unordered list and <h2> and I keep getting a single error on the W3C validator pointing at the img tag. When I nest the tag in another element it validates 100%... stared at the screen for ages but can't see why?

http://validator.w3.org/images/info_icons/error.png Line 22, Column 78: document type does not allow element "img" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "address", "fieldset", "ins", "del" start-tag …83" height="378" alt="mini motor car"/>
David
9th Oct 2009, 04:41 pm
Can you post the code snippet here so we can see it?
Stewart
9th Oct 2009, 05:48 pm
<h1>The dyson vacuum cleaner
</h1>
<h2>why is the dyson vacuum cleaner an example of great design
</h2>
<ul>
<li>Inventive design which removes the need to use vacuum bags
</li>
<li>significantly improves performance of the product relative to traditional designs
</li>
<li>innovative use of form and colour differentiates the products and the brand
</li>
</ul>
<img src="images/dyson-vacuum-cleaner.jpg" width="283" height="378" alt="dyson vacuum cleaner"/>
<h2>history of the dyson vacuum cleaner
</h2>
David
9th Oct 2009, 06:25 pm
Hmm, I can't see anything obvious. I'll take a proper look and test it when I get home.
David
10th Oct 2009, 01:33 pm
Very interesting... Although I've been unable to find a definitive reference for the following, this is what I have concluded:

1. All inline elements must have a block-level parent (for strict doctypes).
2. The reason why this error rarely occurs is that in almost every case, XHTML layouts are driven with CSS and this requires that there is a <div> container for the content.
3. The <body> element alone does not perform this function.
4. This applies to all <img> elements even if {display:block} is used.
5. This rule is true for Strict doctypes only. Transitional doctypes will not cause this error.
6. Inline elements may contain other inline elements but cannot contain block-level elements.

So, if you add a containing <div> element to the code above, the validator will be happy, even though the relationship between the <ul>, <img> and <h2> is unaffected.



<body>
<div>
<h1>The dyson vacuum cleaner</h1>
<h2>why is the dyson vacuum cleaner an example of great design</h2>
<ul>
<li>Inventive design which removes the need to use vacuum bags</li>
<li>significantly improves performance of the product relative to traditional designs</li>
<li>innovative use of form and colour differentiates the products and the brand</li>
</ul>
<img src="images/dyson-vacuum-cleaner.jpg" width="283" height="378" alt="dyson vacuum cleaner" />
<h2>history of the dyson vacuum cleaner</h2>
<strong>this is important</strong>
</div>
</body>
Stewart
10th Oct 2009, 03:41 pm
Thanks for the explanation...