6

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.

Community
  • 1
  • 1
chharvey
  • 8,580
  • 9
  • 56
  • 95
  • I just came across this edition of the [HTML Edition for Web Authors](http://www.w3.org/TR/html5-author/the-p-element.html#the-p-element) which addresses this specific topic; yay! One must wonder, though, what's the difference between a "logical concept" and a "structural concept"? – chharvey Mar 31 '12 at 17:27
  • I think you're right, it should be allowed, or at least have a tag for doing lists inside a paragraph. For instance, if you want to say: I went shopping today, I bought item1, item2, item3 and you want a list like formatting, it makes no sense to have 2 paragraphs for one sentence, and you still want the list formatting because that's how you feel it. Html specs miss something... – ling Sep 25 '16 at 13:20

4 Answers4

9

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.

Su'
  • 2,128
  • 20
  • 22
  • 1
    Thanks for the comment. Definitely helpful in that it provides more information. It didn't solve the problem though, but I wouldn't expect it to because I kinda figured there wasn't a solution. Not sure if it was meant to be sarcastic/condescending but it sounded (or, I guess, "looked") that way. – chharvey Dec 15 '11 at 05:03
  • No, I'm just drawn that way. Really, the answer to your question could've been a flat "can't do it," but given the rest of your comments I figured you might want to know a bit more of the why, what could be done to change that(at least theoretically), and how annoying and probably not worth it it'd all be. I've found myself in the situation many times. – Su' Dec 15 '11 at 09:46
4

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.

Lèse majesté
  • 7,923
  • 2
  • 33
  • 44
  • Thanks for commenting. I already knew everything you said before your last paragraph, as indicated in the links I provided in my question. I was more interested in the **why** aspect of why an `ol` can't be in a `p`. I'm not one for obeying authority without question. I really do like your last idea though: Including an `ol` surrounded by two `p`s all contained in a block element. However I would suggest using `section` instead of `div`, since `section` contains related material. Not really sure what the HTML5 specs imply `div` to be used for anymore, other than a miscellaneous block. – chharvey Dec 15 '11 at 05:05
  • Scratch that last part about using `section`. You're right to use `div` since it's only being used for stylistic purposes. Using a `section` would imply adding another node to the document structure, which is not semantically correct. – chharvey Dec 17 '11 at 14:52
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;
}
Community
  • 1
  • 1
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • 1
    That's horrible(I mean great)! I hadn't even bothered thinking about how to force it to happen. Though it's only visual and doesn't carry the semantic value of *being* a list, which is think is likely the bigger objection for the asker. – Su' Dec 12 '11 at 02:50
  • @Su': What a lame comment (I mean thanks!) :) Yep it's "less semantic" than a list but still retains the semantics of being part of a paragraph (whatever that's worth, probably little-to-nothing). I would never use this, but as a visual puzzle it's definitely solvable. – Wesley Murch Dec 12 '11 at 02:57
  • @Madmartigan: you've got it backwards. I want a semantic list, marked up with the correct tags and everything, *displayed* as if part of a paragraph. Not the other way around. I do appreciate your input. – chharvey Dec 15 '11 at 05:10
1

I think I've figured out the best way to do this. Based on @Lèse majesté's answer, I used an inline 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 the 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) */
}

This appears as:

… 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 …

chharvey
  • 8,580
  • 9
  • 56
  • 95