How do I visually (or semantically) include an <ol> inside a <p>?

Question

According to the HTML Specs and answers to this question, an ol cannot be contained inside a p. But why not?

I'm writing a paper in APA style in which I'd like to use an ordered list in paragraph form. (See OWL and editing-writing for implementations of lists—ordered and unordered—in APA format.)

Sometimes, it makes sense to have a list displayed in paragraph form, and why can't that list semantically be part of the paragraph? For example, in my paper, I have:

… a problem set involving (a) converting between numbers between 0 and 1 in scientific notation and standard decimal form, (b) counting place values of numbers greater than 0, (c) comparing positive and negative numbers with magnitude less than 1, and (d) adding and subtracting numbers in scientific notation. See the attached …

If you don't believe this list is semantically part of the paragraph, please state why you think so, because I'm interested in your opinion.

I'd really like to know how I can write this list using the HTML tags <ol> and <li>, but have them displayed as if they were part of the paragraph. The reason is that semantically, these items are part of an ordered list and to include them in the correct element is good for SEO, yet I am curious of how to keep the list written in paragraph form.

Answer 1

For right now, either break the list into a block if the list semantics are that important to you, or leave it as a text string like your example and get on with your life.

If you don't believe this list is semantically part of the paragraph, please state why you think so,

It is. But that's not the problem.

[...] an ol cannot be contained inside a p. But why not?

Because the spec says so. That's about the end of the discussion.
There are plenty of semantic structures that simply don't exist in HTML due to oversights, and this is one of them. There's also, for example, no true way to mark up footnotes, which is strange considering HTML was initially created for sharing things like academic research. (There are some documented cheats; not the same thing.)
Given your links, I'm assuming you've read the technical reasons regarding block elements and whatnot, so I'll skip that here.

I'd really like to know how I can write this list using the HTML tags <ol> and <li>

Well, you could start with creating a custom DTD(even though you really shouldn't in the great majority of cases) that allows the elements to be nested and then figure out how to actually make the list flow into the paragraph(eg. display:inline etc) in a way that won't make browsers puke. Or maybe specify an entirely new element for in-line lists. Or you could just move on to more important things.

these items are part of an ordered list and to include them in the correct element is good for SEO

Sometimes when people bring up SEO as a reason for doing things, the answer should be "You're trying too hard and probably have better things to do." This is one of them. Any single thing like this done "for SEO" rarely makes anywhere near as much difference as your offense at not being able to do it makes it become in your mind. The real answer to your question involves changing the HTML spec. If that's the sort of work you enjoy doing, then join the relevant WHATWG mailing list, make your proposal, defend it for probably months on end, and if you get lucky it'll become official.

Answer 2

The reason why ol and ul currently can't be contained inside of a p is because paragraph elements can only contain inline elements, and lists are block-level elements.

Perhaps lists shouldn't be automatically considered block-level elements, but that isn't the case at the moment.

So your options are to just split that excerpt into 2 paragraphs, with a list between them, e.g.

… a problem set involving:

1. converting between numbers between 0 and 1 in scientific notation and standard decimal form,
2. counting place values of numbers greater than 0,
3. comparing positive and negative numbers with magnitude less than 1, and
4. adding and subtracting numbers in scientific notation.

See the attached …

Or just create an inline list, which may not validate, but is semantically correct and will render just fine in most browsers.

Answer 3

I think Su's excellent answer nailed the important stuff. I'm not sure if CSS is an option for your particular project, but as far visually including a list inside a paragraph, you can do this with CSS and some <span> tags (and it will validate).

Demo: http://jsfiddle.net/wg9zD/

<p>
    … a problem set involving
    <span class="list">
        <span class="list-item">converting between numbers between 0 and 1 in scientific notation and standard decimal form</span>
        <span class="list-item">counting place values of numbers greater than 0</span>
        <span class="list-item">comparing positive and negative numbers with magnitude less than 1, and</span>
        <span class="list-item">adding and subtracting numbers in scientific notation</span>
    </span>
    See the attached …
</p>

.list {
    counter-reset:mycounter 0;
}
.list-item {
    display: list-item;  
    list-style: inside none;
    margin: 1em;
}
.list-item:before {
    content: "(" counter(mycounter, lower-alpha) ") ";
    counter-increment: mycounter;
}