EDIT: WARNING: <p> is not a wrapping element, it’s an element with semantic meaning. The way I see it, from the last two examples you provided, you’ve seen it used wrong because, being a block-level element, it will act like a building block, starting on a new line AND making elements that follow start on a new line, below.
For that effect, to start with, when there is no CSS (yet) applied, in the initial mark up the alternative is the <br> element:
there’s nothing inherently wrong with a list consisting of paragraphs
but if you’re going to use paragraphs as your list items, make sure that everything in each list item is a paragraph
<ul>
<li><p>This is a paragraph in list item 1.</p>
<p>This is another paragraph in list item 1.</p></li>
<li><p>This is a paragraph in list item 2.</p>
<p>This is another paragraph in list item 2.</p></li>
</ul>
Make sure the content for each list is either %inline, either %block. Just because one <li> has %block content, it doesn’t mean that ALL should follow that rule and have %block content. It has to be consistent only at <li> level, not at <ul>/<ol> level.
The following is valid:
<ul>
<li>
[COLOR="Blue"] <p>This is a paragraph in list item 1.</p>
<p>This is another paragraph in list item 1.</p>[/COLOR]
</li>
<li>
[COLOR="RoyalBlue"] <span>This is a text in list item 2.</span>
<span>This is another text in list item 2.</span>[/COLOR]
</li>
</ul>
And paragraphs should be used ONLY if the text is a paragraph, not to format text, e.g.
[COLOR="Blue"]<li>
<span>This is a text.</span>
<br>
<span>This is another text I want it to appear on a new line.</span>
</li>[/COLOR]
instead of
[COLOR="Red"]<li>
<p>This is a text.</p>
<p>This is another text I want it to appear on a new line.</p>
</li>[/COLOR]
i do realize your first language isn’t english so i will cut you some slack, suffice to say that you consistently come across as confrontational if not outright hostile
but thanks for at least raising the issue, as it allows me to make a correction…
but if you’re going to use paragraphs as your list items, make sure that everything in each list item is a block-level item
so this would also be okay –
<li><p>This is a paragraph in list item 3.</p>
<p>This is another paragraph in list item 3.</p>
<ul><li>curly</li><li>larry</li><li>moe</li></ul></li>
If you’re going to use %block (paragraphs) content IN SOME of your list items, YOU DON’T HAVE to make sure that EVERYTHING in EACH list item is a block-level item, BUT just in THOSE PARTICULAR <li>s.
Is it clear enough now? <li>s MUST have EITHER %block EITHER &inline content, BUT they CAN be different from each other to that concern. Whilst you imply that if ONE has %block content ALL must do so. WRONG!
Off Topic:
Yeah, personal issues of r937 all over again. (Yeah, I understand Latin better than you, so? Especially because I’m ESL.)
If you have a problem with me correcting you (again), feel free to report me or PM me. But let’s keep this post technically accurate and useful for the OP. OK?
But I’m sure you’ll see my tone if far less confrontational and hostile than yours. Look in this thread alone.
noonnope thank you for answer, but now I am really confused and 2 extra questions have appeared
Why to not mix inside li inline and block content? Is it about validation? I thought that since li is block level element, it can contain both. Is that rule only for li, to not mix block and inline items?
2.
You wrote:“And paragraphs should be used ONLY if the text is a paragraph, not to format text, e.g.”
What exactly do you mean by not to format text? Author of the the sitepoint css book (Build Your Website the Right Way Using HTML&CSS) also used p to “wrap” labels and inputs:
<p>
<input type="checkbox" name="terms" id="terms"/>
<label for="terms">I have read the terms and conditions.<label>
</p>
<p>
<input type="checkbox" name="newsletter" id="newsletter"/>
<label for="terms">Subscribe me to your weekly newsletter.<label>
</p>
So this is not correct since it is not strictly pharagraph?
3.
And finally back to my origin question. Can be just <li>lorem ipsum</li> without span or p?
My understanding is that, on a technical level, you can have adjacent <li>s within the same <ul>/<ol> that have different content models, ie one can have block elements and the next can have inline text and elements. It’s just within each individual <li> that you have to decide on either inline or block content.
I don’t like that, I think it’s messy and I think that from a purist point of view the content model should be the same throughout the list, but I’ve not seen anything that actually spells out that it has to be. Unless you can say otherwise?
From the top: <li>lorem ipsum</li> = <li>CDATA</li> = <li>%inline</li> = CORRECT!
The above answers point 1. also.
Using p as a wrapper just to make elements or group of elements start on a new line. p is just not for that.
No, it’s not semantic, it’s used only to make a group of elements start on a new line, a feature %block elements like p have. So, no, it’s not correct. p is not a wrapper or a container for simulating style.
EDIT: The correct element there would be fieldset. And, if you have inline elements you’d like to start on a new line, <br> is the answer.
noonnope really hit it on the head with the “it’s not a paragraph” – something people coming from typography often fail to grasp is P doesn’t mean typographical paragraph mark, no matter how much they want it to.
P means it’s a grammatical paragraph of text… You don’t have enough related text forming a coherent thought there to be using paragraphs in the first place!
Is it a list item, or is it a paragraph – good rule of thumb? Pick one, not both. If it’s enough text to warrant multiple paragraphs and it’s coherent thoughts/sentences, it’s probably too big to be in a UL in the first place… Since at that point it stops being a bullet point list item. (and before someone says it, I mean grammatical bullet point NOT the presentational “happens to have a bullet in front of it”!!!) – but to put that in perspective I actually LIKED the rules for LI under the deprecated MENU tag, and wish that was the rules for all LI as it would make the point of a “list item” clearer, and explain why just because you have a list it does NOT neccesarily have to be shoe-horned into a UL, OL or DL – particularly when you are applying the WRONG semantic meaning by doing so.
Bottom line remember, the point of GOOD HTML is to say what things are, NOT how they are going to appear. When you write your initial markup you should NOT be thinking appearance at ALL. Logical document structure, logical heading orders to divide up that documnet, DIV’s to group like elements together – all saying what things ARE.
Appearance? That’s either the user agent or CSS’ job.
Chiming in an supporting what Noonnope and death have said… but in a user friendly way:
its ok to use block elements ( a P for example) OR inline elements as CHILDREN( direct descendants) of an LI, but you CANT use elements AND inline elements; pick one or the other according to what s most semantically correct.
So that leaves WHEN to use what. This is echoing shadow, then you think about it your example is a quasi sentence, for lack of a better term. it would read sort of like this:
First name[/I]Message title lorem ipsum[/I]12.02.2010
(ignore the styling, I put it so you could see the segments).
I disagree with shadow is that it is possible to have one sentence paragraphs, even one SHORT sentence paragraphs. not common in tech writing, but look at advertising… or fiction or even biographies (ughh).
you you could wrap your “sentence” in a P, but it would become obvious that without something else as part of the content of the LI , the P tag is superfluous and can be removed. and thus your first example is the best.
but do note, that there might be a situation in which you want to have a short paragraph of text along with the meta info…
<li>
<p><a href=“#”>First name</a><strong>Message title lorem ipsum</strong><span>12.02.2010</span></p>
<p> this would be the first paragraph of the message. maybe a teaser of the article… btw why would you put a link to the name and not the title… but whatever</p>
</li>
in that case you WOULD have to wrap BOTH in a paragraph… or considering using a DL , using DTs to contain your name link, title and time, and the DD for the message… ( ironically enough: inline, inline, inline, block!
But really expecting a documented answer to the second one only : )
I may be wrong on this one, but it seems to me you’re suggesting this?
<li>
<p>
<p><a href="#">First name</a><strong>Message title lorem ipsum</strong><span>12.02.2010</span></p>
<p> this would be the first paragraph of the message. maybe a teaser of the article... btw why would you put a link to the name and not the title.. but whatever</p>
</p>
</li>
If not, then just forget about it : ) My bad. Apologies in advance.
Of course, the first paragraph is just wrong. Those a, strong and span elements should not be in a p, and should be like this:
<a href="#">First name</a>
<span>
<strong>Message title lorem ipsum</strong> 12.02.2010
</span>
You can’t justify the use of p as a wrapper for them only because a p is the next element to follow. Not that it should, but hey, let’s say that a p would follow ; )
Especially because I’m ESL.) 