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

Question

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

I am writing an APA style article in which I would like to use an ordered list in the form of a paragraph. (See OWL and editing-writing for list implementations, ordered and disordered in APA format.)

Sometimes it makes sense to have a list displayed in the form of a paragraph, and why cannot this list be semantically part of a paragraph? For example, in my article, I:

& hellip; a set of tasks, including (a) converting numbers between 0 and 1 to scientific notation and standard decimal form, (b) calculating place values ​​greater than 0, (c) comparing positive and negative numbers with a value less than 1, and (d) adding and subtracting numbers in scientific notation. See Attached & hellip;

If you do not believe that this list is semantically part of a paragraph, indicate why you think so because I am interested in your opinion.

I would really like to know how I can write this list using the HTML <ol> and <li> tags, but display them as if they were part of a paragraph. The reason is that, semantically, these elements are part of an ordered list and it’s good for SEO to include them in the right element, but I'm curious how to save a list written in paragraph form.

Answer 1

The reason ol and ul currently cannot be contained inside p is because paragraph elements can only contain inline elements, and lists are block level elements.

Lists may not be automatically considered block elements, but this is not the case at the moment.

So, your options are simply to break this snippet into 2 paragraphs, with a list between them, for example.

... a set of tasks, including:

• converting numbers between 0 and 1 to scientific notation and standard decimal form,
• counting place values ​​greater than 0,
• comparing positive and negative numbers with a value less than 1 and
• Adding and subtracting numbers in scientific notation.

See attached ...

Or just create a built-in list that may not be checked, but is semantically correct and will be displayed simply in most browsers.

Answer 2

Currently, either break the list down into blocks if the semantics of the list are important to you, or leave it as a text string similar to your example and continue your life.

If you don’t believe that this list is semantically part of a paragraph, indicate why you think so.

It. But it's not a problem.

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

Because the specification says so. This is about ending the discussion.
There are many semantic structures that simply do not exist in HTML due to omissions, and this is one of them. There is also, for example, no true way to mark up footnotes, which is strange considering that HTML was originally created to exchange things like academic research. (There are some documented cheats , not the same.)
Given your links, I assume that you read the technical reasons regarding block elements and something else, so I'll skip this here.

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

Well, you can start by creating a custom DTD (even if you really shouldn't in the vast majority of cases), which allows the elements to be inserted, and then determine how to actually make the list flow in the paragraph (for example, display: inline, etc.) so as to win Make browsers pale. Or maybe specify a completely new element for inline lists. Or you can just skip to more important things.

these elements are part of an ordered list and include them in the right element, which is good for SEO

Sometimes, when people bring SEO up as a reason to do something, the answer should be "You're trying too hard and probably doing better." This is one of them. Any thing like this done “for SEO” seldom makes almost the same difference as your crime when you are not able to do it, and it becomes in your mind. The real answer to your question is related to changing the HTML specification. If you like this kind of work, then join the appropriate WHATWG mailing list , make your offer, defend it, perhaps in a few months in a row, and if you are lucky, it will become official.

Answer 3

I think Su a great answer nailed important things. I'm not sure CSS is an option for your specific project, but if you visually include a list inside a paragraph, you can do it with CSS and some <span> tags (and it will check).

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; } 

Answer 4

I think I figured out how to do this. Based on @ Lèse majesté's answer, I used the built-in list:

 <div class="paragraph"> <p>... a problem set involving:</p> <ol> <li>converting between numbers between 0 and 1 in scientific notation and standard decimal form;</li> <li>counting place values of numbers greater than 0;</li> <li>comparing positive and negative numbers with magnitude less than 1; and</li> <li>adding and subtracting numbers in scientific notation.</li> </ol> <p>See the attached ...</p> </div> 

with style rules:

 div.paragraph p { display: inline; } div.paragraph ul, div.paragraph ol, div.paragraph li { padding: 0px; display: inline; list-style-type: lower-alpha; font-weight: bold; /* for demo purposes */ } div.paragraph { counter-reset: item; /* creates a counter called 'item' initialized to 0 */ } div.paragraph li:before { counter-increment: item; /* Add 1 to 'item' counter */ content: '(' counter(item, lower-alpha) ') '; /* display (item) */ } 

It looks like:

& hellip; a set of tasks, including: (a) converting numbers between 0 and 1 into scientific notation and standard decimal form; (b) counting location values ​​greater than 0; (c) comparing positive and negative numbers with a value less than 1; and (d) adding and subtracting numbers in scientific notation. See attached & hellip;