Looking for Documentation on Hierarchy of Styles

[ktbCA57]

I just came into a writing team who is using a fairly basic stylesheet... However, I noticed that their images are also within p tags. This is the same for numbers and lists.

I have usually kept p tags away from images and lists, etc. But now I'm not sure that's a best practice. I'm struggling to find specific information on this issue. Can anyone provide the best practice and why - or at least a specific piece of documentation that explains why this is an efficient or inefficient practice.

In the meantime, I will continue to search for such information. Just hoping someone had some good input with regard to this issue.

Thanks!

[robdocsmith]

By default IMG is an inline element (well, a replaced element with a default inline display value). So IMG can live comfortably within a P tag, but they don't have to. My guess is that you should agree what your best practice is, and stick to it for ease of maintenance across your doc set.

I choose to put my IMG's within P tags as most often my images are semantically linked to a particular piece of text. Then I use styling on the P tag to determine the IMG position/size. As P tags are by default block elements I find it more logical to use them to affect an image position - perhaps floating them to the right or left of a piece of text, or just centering them. But that's only my opinion and I'm sure there are many others who keep their IMG tags outside of P tags.

Where an icon is embedded in a string of text, the IMG remains inline and position is controlled by the text flow of the P tag that contains it. Where a larger image takes up a full column width, I embed it in a P tag to make it a block element and provide some centering. Where an image is floated to the right of a step, I also embed in a P tag to control the position of that floated element.

Now that I think about it, it would be just as easy to make my P.image classes into IMG.image classes and control them that way. But I think given that would make some of my IMGs blocks and others inline I prefer to keep that information away from the IMG itself and put the onus on the container.

Just my thoughts,

Rob

[ktbCA57]

Thanks, Rob...

Glad to know it's not "wrong" to do it that way... but how about lists? They have lists with p tags also...

[robdocsmith]

Well, that's a matter of preference. I noticed that Flare now likes to put in P tags inside LI elements by default. Seem to remember that you can turn that behaviour off. Personally I'm glad it's there and it saves time for me. I would use multiple P tags inside a LI to add a graphic or a list continuation paragraph. So for me, it's more consistent and easier to manage my styles and any potential conflicts in spacing if all my LI tags have P tags inside them. By the HTML standards they aren't a requirement by any means. I have my styles for the positioning of bullet and indent in the LI definition along with spacing between LI elements, and I have vertical spacing between paragraphs in the P tag. I manage space before and after the list in the UL/OL elements.

Rob

[ktbCA57]

Thanks, AGAIN, Rob!

I just want to make sure we are structuring everything as efficiently as possible. When I was first learning Flare, I seem to remember folks telling me not to bury the basic tag too deep... so I'm just trying to stay up with what's best and what's efficient.

Thanks so so much!