Don't know what kind of tag this should be

So I’m trying not to use <p>'s when it’s not a paragraph.

In my header I have my logo then I have a slogan/tagline that’s a sentence long.

Obviously it shouldn’t be a header tag, but not a <p> either. What would you guys do in this scenario

I know I could get away with using a <p>, but some people on here get pretty heated about using <p> when it’s not for paragraphs of text. Just trying to be as correct as possible.

I’ve never had a problem with using <p> as a generic container for passages of text, even if they aren’t full-on paragraphs. If you want to be hypercorrect, you could use a <div> instead, but in that context, it makes very little difference.

There’s no law that says that a paragraph can’t consist of a single sentence. In fact, in normal English writing, it happens quite frequently.

I use "p"s for text content no matter how small the sentence unless there is another suitable element available such as a heading/list/address etc.

Unlike a lot of people I also use “p” for images because an image speaks a thousand words and words belong in sentences which belong in paragraphs. If the image is in the foreground then it is content that is saying something so should be in a p element not a div. Not everyone agrees with this though :slight_smile:

In my mind divs are divisions of content and best avoided for raw content but rather as a means to section the page and group elements structurally.

Well, I was gonna say something along the lines of Paul’s comment, particularly about the incorrect use of divs in place of p’s, but he said it a lot better than I would have, so … what he said. :slight_smile:

…but aren’t made of words… and browsers need to be able to tell the difference. I’m surprised you use the <p> tag for images since images have their own tag, it seems semantically incorrect.

I think it’s ok to use a <p> tag for a singel sentence since a sentence is the smallest element of a paragraph and therefore IS a paragraph, like this sentence.

Images are inline elements and cannot be a direct descendant of the body and must be enclosed in a block level tag. I just afford then the same courtesy when they are not direct descendants also.

It’s ok to wrap them in a div but I think that is less semantically correct than wrapping them in a p element. After all if the image is missing then the alt text will show and the alt text is usually the type of words that would go in a sentence.

It is also semantically incorrect to do this.


<p>some content</p>
<img src="img.png" width="50" height="50" alt="Image test" />
<p>Some more content</p>

Placing inline elements next to block elements is bad practice and indeed if these were direct descendants of the body would be invalid as mentioned before.

The image needs to go in a block level container to avoid the browser constructing an anonymous block box for us. Whether you use a p or a div is debatable but I prefer a p element for the reasons I stated and because it’s not a division.

If you don’t enclose inline elements then IE will quite often misplace the element and indeed gecko quite often doesn’t know what to do with the white-space nodes that inline elements preserve.

This is a pet hate of mine and I see it the equivalent of saying this.


<p>some content</p>
 anonymous text
<p>Some more content</p>

It’s not invalid but it’s just not nice :slight_smile:

It is invalid if you use a Strict Doctype. :wink:

You can divide everything in divs.

#header {
width:100%; height:200px;
}
#Logo {
width:200px; height:200px;
float:left;
}
#Logo .Image {
width:200px; height:150px;
float:left;
}
#Logo .slogan {
clear:both;
width:200px; height:50px;
font-size:12px;
}

now you can use it for example:

<div id=“header”>
<div id=“Logo”>
<div class=“Image”> <img src=“images/logo.jpg” alt=“logo” width=“150” height=“150” /></div>
<div class=“slogan”> This is a slogan line</div>
</div>
</div>

You can but its ugly and non semantic.:slight_smile:

Yes that’s what I meant to say :slight_smile:

I do this all the time… :blush: (Given that you co-authored ‘The Ultimate CSS Reference’ I’m definitely not trying to prove you wrong here :p, simply trying to understand it better.)

If <img> is an inline element but has width and height giving it block properties too I don’t get why it has to be contained in anything. Since I never use images as direct descendants of the body, at the very least they’re going to be in a ‘mainContainer’ type Div, I’m assuming that I’m failing to understand the importance of you ‘affording them the same courtesy’? Why is it bad practice?

If inline elements have to be contained within a block element, why hasn’t one been invented for this problem with images?

(OP, excuse the digression, I’m assuming that you’re happy with the answers to your sentence/paragraph question)

lol - Robert and Tommy are the html experts.:slight_smile: I’m just a CSS guy. I just do html the way I think it should be done which doesn’t always mean I’m right.

If <img> is an inline element but has width and height giving it block properties too I don’t get why it has to be contained in anything.

CSS cannot change the rules of html.

It can change the appearance of things and it can set an element to have a “display” of “block” - which basically makes it display a block box. It still does not mean that the element is a “block element”. They are different concepts and even though you change the display of an element it must obey the html rules for that element.

Since I never use images as direct descendants of the body, at the very least they’re going to be in a ‘mainContainer’ type Div, I’m assuming that I’m failing to understand the importance of you ‘affording them the same courtesy’? Why is it bad practice?

For the same reason and the same logic that you shouldn’t do this.


<p>some content</p>  <span>anonymous text</span> <p>Some more content</p>

It’s valid and works (mostly) but it’s not semantically correct.

However, irrespective of the rights and wrongs it causes browser bugs and I see a few posts every month in the forum directly related to this problem. That in itself is enough to convince me to use other methods. As I said above a div will do fine if you don’t like using a p element - but a “p” element seems right to me (and is less characters to type).:slight_smile:

If inline elements have to be contained within a block element, why hasn’t one been invented for this problem with images?

I suppose its the same as asking why there isn’t a parent for a span. It depends on its use and it can go in paragraphs or divs or headings etc just like an image could.

Actually I think it would have been more sense for images to be elements like del and insert which are both block elements and inline elements depending where used. Then it would be fine to have them stand shoulder to shoulder with block elements.

Ok, I’ll bear it in mind in the future, thanks.

Actually I think it would have been more sense for images to be elements like del and insert which are both block elements and inline elements depending where used. Then it would be fine to have them stand shoulder to shoulder with block elements.

I would support this, because a paragraph and an image are two very different kinds of content. Wrapping images in p’s is something I only do to get around the idea of loose inlines mixing with p’s, and I cringe every time I do it, because I know deep down inside that it’s actually very wrong. An image content, but it is not a paragraph, nor a text fragment. It merely has a text fragment as a backup, and this fails on all sites where content is uploaded by those who are not the webmaster (they either don’t have alt text even tho they are content, or cannot have correct alt text).

The render problems people have with browsers when mixing the two vanishes when you set those inlines to blocks in CSS, which with images, you usually are anyway.

I have no issue putting block text fragments in a p. P means “block text content” to me so this is not an issue. In the OP’s case, I have and probably will continue to use a p for that kind of situation. Esp since a tagline included makes it pretty close to a sentence.

This is definitely a time where Tommy should weigh in. I miss the Mad Swede around these parts. :frowning:

It would be interesting to go back into the original HTML specs and see what Berners-Lee and the other creators intended the <p> tag to be used for in a strict semantic sense.

Meh, you see how in the specs they use p as the tag to wrap label-input pairs in forms? Professional opinion about tag semantics isn’t stable and obviously has changed since the specs were first written over a decade ago.