Nest lists in paragraphs in html - html

It seems that (strict) html doesn't allow nesting any non-inline elements inside a <p>, but then how am I supposed to render a paragraph that contains a list (something that occurs often in natural texts). I've seen three answers that all seem unsatisfying:
Lists should not happen inside paragraphs. (I'm not going to go into a cultural debate, but I certainly hope that html is not going to become the place to dictate writing style.)
Separate the text into a paragraph, then a list, and then a second paragraph with the post-text. This looks bad because now I have <p> chunks that are parts of paragraphs, and that seems bad for a markup that is trying to to move in a more semantic direction.
Fake paragraphs using some <div class="mypara"> — which looks like a bad way to bypass the whole thing and give up on using the markup with the proper semantics for text.
Is there some other way to do this that is semantically correct and valid?

Paragraphs in HTML 5, as of the latest working draft, are defined as flow elements which can contain phrasing elements only. Lists are also defined as flow elements, and may not be enclosed in paragraphs. Whatever you think the definition of paragraph should be, this is the formal definition of the term in HTML, and I think it's unlikely to change.
There are two possibilities that you might consider besides the two you've mentioned:
Consider reaching for a more broad-reaching flow element than paragraph if it applies, such as section, nav, header, footer, or article.
Use a hybrid approach: wrap the p – ol – p sequence with a div of your choosing that applies common formatting to the set.
As far as div goes, the HTML 5 spec clearly recommends that it should be a "last resort" element because it doesn't bear semantic meaning in the way that other HTML elements do, and may not be as user-friendly in alternative user agents. Going by this advice, I wouldn't use div at the cost of p for body text if semantics are important to you. However, it can be useful in making sure that the use of multiple paragraphs does not get too visually choppy.

I don't think the html <p> tag is meant to control the idioms of actual writing styles. It is simpy a way to display a chunk of text in an orderly manner. I don't believe it is meant to simulate printed material. You will have to use a Div for this one.

Is there a visual style reason behind all this? In other words when you have something like the following, is it visually rendering in a way that you do not find ideal?
<p>Some paragraph text.</p>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
<p>Another paragraph.</p>
If the problem is too much margin after the P and before the UL, then you can try an adjacent sibling selector like this to compensate:
p + ul { margin-top: -1em; }

I suppose it depends on what you consider to be a "paragraph". It is obvious to me that the designers of HTML in no way consider a list to be part of a paragraph. And while I think an argument could be made for either interpretation, I'm of the opinion that the spec is correct.
While a list doesn't represent a break in line of thought, it certainly represents a change in voice or method of thought, which I believe merits a new semantic container.
In the same vein, a paragraph represents a logical partition in a piece of writing. A list represents a sequence of logical partitions, and while it is imaginable that one logical partition may be then divided into more partitions, it makes more sense to simply create a new partition (especially for such a large break in the voice/method).
Semantics can be largely subjective. And that's fine. However, in this case, I'm of the opinion that the HTML spec correctly represents the semantics.

The answer to your question is obviously no, because the specs say you can't do it. Like you, I like to maintain semantics, so I usually go with your 2nd option (paragraph, list, another paragraph). However, off the top of my head, I can't think of any text where the list doesn't actually break the flow of text, so it seems that starting a new paragraph after a list can't hurt.

Related

List or longer code snippet inside paragraph

When writing about algorithms, it is often very convenient to write some (pseudo)code inside a paragraph, or even in the middle of a sentence. To visually support the structure of a more complex sentence, lists come handy too.
Obviously, one sentence must not be split across different paragraphs. But in our case it has to be due to HTML nesting rules.
Paragraph is the p element, which cannot contain block-level elements. Unfortunately for our case, pre and lists are block-level.
If I do not obey the spec and include pre or ol/ul/dl in a p, the p is automatically closed right before the element’s start tag by any parser I know. (This is due to the SGML OMITTAG feature settings on p.) Maybe this and backward compatibility are the reason behind the design decision of disallowing pre and lists inside p.
Is there any way, how to include lists and longer code snippets into paragraphs?
I could re-formulate my sentences and paragraphs not to need snippets and lists, but it needs much thinking and attention and could make my text harder to read and understand. This is not a solution for me.
I could use code with whitespace: pre and display: block for longer code snippets and code with whitespace: pre-wrap for the shorter ones. Is this semantically correct?
I could think of lists inside sentences as mere visual sugar with no semantics at all. Then I would use spans with display: list-item to make them look like lists. Would that be correct from the semantical point of view? Is the sacrifice of semantical structure necessary?
This question applies to both HTML and XHTML as the rules for nesting elements are the same. By HTML i mean HTML 4.01 Strict, by XHTML i mean XHTML 1.0 Strict. Is this issue somehow addressed in HTML 5?
To be explicit, I want a standards-compliant, both syntactically and semantically correct solution, not a non-standard hack of any kind. Specifically, turning p into div is not a solution for me.
Related questions
ul element can never be a child of p element
<code> vs <pre> vs <samp> for inline and block code snippets
<pre> tag making browsers close paragraphs
Can I have a <pre> Tag inside a <p> tag in Tumblr?
Should ol/ul be inside <p> or outside?
unordered list in a paragraph element
Nest lists in paragraphs in html
See also
CSS Design: Taming Lists # A List Apart
As far as HTML is concerned, all that a single <p> element represents is a block of phrasing content that happens to flow like a paragraph of text. Even though it's called a paragraph, it doesn't have to strictly represent a paragraph of text in writing.
You are not compromising semantics in any way by breaking a paragraph, even mid-sentence, into two <p> elements in order to introduce a list or a block-level code snippet. It is completely acceptable.
As a matter of fact, HTML5 agrees (whereas HTML 4 woefully has absolutely nothing to say beyond "the P element represents a paragraph"):
List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.
For instance, this fantastic sentence has bullets relating to
wizards,
faster-than-light travel, and
telepathy,
and is further discussed below.
The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this specification: one before the list, one for each bullet, and one after the list.
The markup for the above example could therefore be:
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
<p>and is further discussed below.</p>
If you view the source of the document, you can see that even the quoted example consists of a <p> element containing the text "The markup for the above example could therefore be:", immediately followed by a <pre> element containing the example markup.
If you are still concerned, HTML5 offers an alternative, but that basically involves using a <div> instead of separate <p> elements, which as you've stated is not a solution for you.
Lastly, it is safe to assume that everything I've mentioned applies to HTML 4 and XHTML 1 as well. For what it's worth, this concept was explored in XHTML 2, which would have allowed <p> elements to contain any other type of content.

What's the right way to put lists within a paragraph in HTML5?

I get the technical explanation for why a <p> element can't contain a <ul> element. Unfortunately, this doesn't help me when that's the structure of the content.
In meta, I understand neither
the semantic explanation, nor
the recommended structure
for cases where I actually want to show a list of items "inline" with normal content.
This page suggests either separating the list from the paragraphs:
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
<p>and is further discussed below.</p>
or using an alternate tag for the paragraph:
<div>For instance, this fantastic sentence has bullets relating to
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
and is further discussed below.</div>
But both of these strike me as terrible hacks that make a mockery of HTML5's supposed semantic content.
In the first case, how is the <p> tag semantically meaningful? Not to mention the practical difficulty of correctly styling this if I want to eliminate the spacing around the list (and then if I have other lists that really are separate blocks of content -- oy!)
In the second case, if I need to have a <div> that means "this is a paragraph of content" I might as well just drop <p> entirely, rather than have to switch back and forth depending on the content appearing within the paragraph.
ISTM that the most semantically meaningful version might be something like:
<p>For instance, this fantastic sentence has bullets relating to
<span class="li">wizards,</span>
<span class="li">faster-than-light travel, and</span>
<span class="li">telepathy,</span>
and is further discussed below.</p>
with the spans styled as block or list items (and who knows what other tweaks) to get the rendering right. Practically, this sounds like an awful lot of aggravation.
Is there any good recommendation for rendering this sort of content?
Edit
This is actually not all that hard to style, it seems. I'm not sure if there's a way to pick up all the browser defaults, but I can replicate the default list style (on OS X Chrome, at least) with:
span.li {
display: list-item;
list-style-type: disc;
margin-left: 40px;
}
To me, this is an example of listitis, or seeing every sequence of things as a list that needs marking up as such.
My first approach would be to mark up what you have as:
<p>For instance, this fantastic sentence has bullets relating to wizards,
faster-than-light travel, and telepathy, and is further discussed below.</p>
If you need to apply a common styling to those items, then the appropriate styling hook is <span> as you have in your final example. I wouldn't use li as a class name though; whether each scrap of text constitutes a list-item or not is not very meaningful. It's always difficult to choose correct class names without knowing the overall content of the page and how it is used in context, but possibly topic would be an appropriate choice. So the mark-up becomes
<p>For instance, this fantastic sentence has bullets relating to <span
class="topic">wizards</span>, <span class="topic">faster-than-light
travel</span>, and <span class="topic">telepathy</span>, and is further
discussed below.</p>
Seems to me if you're employing a ul or ol you're effectively ending the paragraph (or other element) that precedes it unless you're nesting lists. If it really was a sentence and those items were inline (and in the case you propose, I think all that really is a sentence), then I'd just list them out within the <p> with commas as delimiters:
<p>For instance, this fantastic sentence has bullets relating to:
wizards, faster-than-light travel, and telepathy,
and is further discussed below.</p>
If you really want bullets, perhaps a heading would be more fitting:
<h2>For instance, this fantastic heading has bullets relating to:</h2>
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>

good style: <br> element in html

Is it considered bad style to use <br>? I have a text element that I would like to break up into two lines, is there a more recommended way to do this or a different element I should use?
The question you need to ask is, why do you need to break up the line?
If it's to make it fit in a space,
you need to use CSS to set word
wrapping and width values.
If it's because they are distinct
paragraphs, use the <p> tag.
If it's because you need to show a
visually distinct sample of
something, set display: block with
CSS.
Otherwise, it might be okay. What's the reason for the break?
You want to be as semantically correct as possible, and you want to separate presentation from content.
Semantically, the break tag is intended to convey a natural break in the flow of information - it's a little vague, but the idea is to use it when you need to indicate that there is a logical separation between elements but that they are still part of the same general context.
For instance I might have fieldsets styled so that they layout inline, racking up horizontally. In that scenario if I wanted to separate two fieldsets in the same form, I'd likely use a break tag. It indicates both visually and semantically that the fieldsets are still part of the same context but that there is some concept of seperation between them.
Another, probably better example: the address element.
<address>
<p>
123 Main Street<br/>
Townsville, USA 12345
</p>
</address>
The spec equates it to a carriage return. http://www.w3.org/TR/html401/struct/text.html
They're only 'bad' when you're using them for layout - i.e.: multiple breaks to emulate spacing that should really be handled in a cosmetic layer (like CSS).

Is the <div> tag ever an undesirable alternative to the <p> tag?

I see the <p> tag used a lot in the code of others but have never used it in my own work.
I'm wondering what advantage this gives over using a <div> tag?
Are there any benefits I could get
from incorporating the <p> tag
into my pages?
Is there any disadvantage in only
using <div> tags without <p>?
DIV indicates a separate section on a page, which is not semantically connected to the others. With P tags you indicate that this piece of text is broken into paragraphs but it still stays a single entity.
ADDED: With "semantics" people usually refer to the possibility to extract information from HTML as to what various elements of a page represent and how they are related to each other, as opposed to treating the whole HTML as just a markup to be rendered. For example, when you do menus it is recommended that you use ULs (unordered list) for that purpose, because it will be possible to learn from the markup that all LIs (list items) contained within a particular list probably mean choice options of the same level. I know it is helpful for screen readers for impaired people that you try to make your markup as semantic-rich as possible.
If you're not concerned with this, then it is virtually no difference for the rendered result whether you use DIVs or Ps. You can style both with CSS to achieve the same look and feel.
Semantic HTML is still not "the absolute good" to be strived for. For many people semantics does not add any value as they wish just that their pages are rendered correctly. That's why the ever-lasting discussion on whether to use tables for markup (and add semantics where it does not belong) or stick to CSS is not going to end any soon.
p means 'paragraph', div means 'division'. That's as complicated as it gets. It's a way of telling search-engines, scrapers, tools, etc that this is a paragraph of text.
div is undesirable when you're actually marking up a 'paragraph' of text.
Both tags have a different purpose.
p indicates a paragraph, usually for
organising content (text and
images,mostly)
div on the other hand is a
rectangular space on the canvas,
usually for layout purposes.
Example: You would put your navigation panel in a div, making it easy to move it from the left to the right of the page, or switching to a 3 column layout. The different sections in your navigation (first the general site navigation, next specific hotlinks to the most recent blog post or whatever) could be seperated by putting them in defferent paragraphs.
(I know, bad example, because the navigation is better represented by unordered lists, but what the hey).
In direct answer to your question, they give you the advantage of differentiating between organising your layout and organising your content, in a way that becomes clear in the HTML source.
If you are tagging content so you can lay it out with CSS, you probably want <div>; <p> should be used to indicate a paragraph of text and that's it.
Beyond just the semantics of it (which are important), you will also want to consider validation problems. According to the HTML4 spec, you are not allowed to nest other block-level elements (<div>, <ul>, other <p>, etc) inside a <p> without invalidating your HTML.
I've seen a number of instances where parsers will choose to prematurely close the <p> to allow the other nested block element to begin.
Are there any benefits I could get
from incorporating the tag into my
pages?
Yes, provided that you use it correctly -- because the use of semantic HTML is always a benefit.
There are a range of reasons why this is so, but the primary one for people who need a quick explanation is SEO. Search engines will understand your page better if you use semantic HTML.
p tags are for paragraphs. p tags often contain additional CSS styling regarding the textual content that goes into them, and this styling can be defined in various places in the css documentation. for example, a p usually has a bit of extra space below it. if you try laying something out with p tags, you'll end up with uneven padding.
It is better to use divs if you want to have more control over the content in your page from a programmatic perspective. sticking to divs for all layout concerns will also allow you to use p tags exclusively for paragraphs.

HTML blockquote vs div

Is there any benefit in using a <blockquote> element over a <div>? I was looking at a website's markup to learn CSS and I couldn't figure out why the <blockquote> was being used.
EDIT: Yeah sorry I didn't clarify, it was used to hold the <div> tag with username as 'text' and an input tag. There was clearly no quote.
Semantically, a blockquote tag makes sense when you're quoting something. Sure, a stylized div can do the same thing, but why not use the right tag for the job?
Additionally, the blockquote tag allows you to include a citation with the cite attribute.
In theory, HTML should be as "semantic" as possible - meaning that every element should indicate something about its content. <h1>s should enclose the most important headline; <p>s should surround paragraphs; <em> should indicate emphasis, etc.
That way the code makes sense when you - or a screen reader, or whatever - look at it. This also helps for devices that don't understand all (or any) of your CSS rules.
<blockquote> should be used when the text it contains is a block quote. This sounds very obvious to me, so is there another aspect to your question?
As mentioned, <blockquote> is for quoting. Similarly you will use several <p> blocks for paragraphs within one <div> that holds page content or whatever. HTML5 proposal will have lot more block elements (i.e same as divs) which purpose will be to add a semantic info about it, such as header, footer, menu, etc.
As mentioned earlier, blockquotes are for quotes. Just like tables are (arguably) for tabular data, lists are for listings, divs for divisions, p for paragraphs, etc.
Sure, you could almost everything with divs. That's the beauty of using HTML with CSS: you can make anything look however you want it to look (in theory, in the real world browser quirks mess that up sometimes).
Using divs for anything you can think of is commonly known as 'divitis'. See this article for a little explanation :)
The likely reason they're using blockquote is that many people dabbling in HTML don't know enough about CSS to know that a div can be given the same left-margin as blockquote renders with by default.
Easy peasy, right? Nothing has really changed. Remember that as is a ‘block-level element’ (flow content) we can put most anything in it, including headers, images, and tables, in addition to the usual paragraphs of text. There are a couple of slight differences in HTML5 though. is a sectioning root, meaning that any - elements it contains don’t become part of the document’s outline. Also, adding a single paragraph of text with no enclosing tags is now completely kosher. Here are some simple examples (apologies for the fake content):
The suggestions in my article came directly from writing and editing a few megs worth of raw text used on my website, which bought up lots of edge-cases and curious questions about semantics; so whilst I wouldn’t say my choices would suit everybody, they have at least been trialed in a background of the text.
My complaint about the ABBR article you published here on HTML5Doctor was essential that you weren’t following your own advice, as I know that I practically went insane trying to use those rules on megs of text before I came up with my own to take back control of my sanity.
But, I will definitely say that cite still remains the weaker out of the three and I appreciate this article for being far more square.
If you would like, my article could be further adapted with feedback from the doctors to better suit a broader audience. I strongly believe that a key part of learning HTML5 is learning HTML4 properly and eschewing spans and divs for semantics where possible