XHTML2/P and lists

From XHTML2
Jump to: navigation, search

P and Lists: Embedding and Association Patterns

As per XHTML WG Action Item 65, here are 3 groups of examples of a list in a P as well as a list following a P. Note: the only way to bind a list to a P without nesting the list in the P is to use aria-labelledby, as illustrated in the first 2 examples below. The third example shows not only a nested list, but incorporates an example of binding a Q (quote) element to a corresponding CITE using the for/id mechanism a number of other markup that is likely to occur in a situation where one needs to establish an explicit binding between a list and the prose of which it is a child.

OPTION 1: The Martini Example

 <!-- prose list -->
 <p>The ingredients for a dry martini are: 2 parts gin or 
 vodka; one-half part white dry vermouth; and an olive 
 (optional).</p>
 <!-- P with nested UL -->
 <p>The ingredients for a martini are:
    <ul>
    <li>2 parts gin (or vodka);</li>
    <li>one-half part white dry vermouth;</li>
    <li>one olive (optional)</li>
    </ul>
 </p>
 <!-- P with accompanying list -->
 <p>The ingredients for a martini are:</p>
    <ul>
    <li>2 parts gin (or vodka)</li>
    <li>one-half part white dry vermouth;</li>
    <li>one olive (optional)</li>
    </ul>
 <!-- repair for P with accompanying list: addition of ARIA -->
 <p id="p3">The ingredients for a dry martini are:</p>
   <ul aria-labelledby="#p3">
       <li>2 parts gin (or vodka)</li>
       <li>one-half part white dry vermouth;</li>
       <li>one olive (optional)</li>
   </ul>

OPTION 2: Fudge-Based Examples

 
 <!-- prose list -->
 <p>The ingredients for the recipie are: one stick of butter 
 (melted); 1 cup of confectioner's sugar; one half cup of 
 powdered cocoa; one quarter cup of milk and three drops of 
 pure vanilla extract.</p>
  
  <!-- P with nested UL -->
  <p>
  The ingredients for microwave fudge are:
  <ul>
     <li>1 stick of butter</li>
     <li>1 cup of confectioner's sugar;</li>
     <li>half a cup of powdered cocoa;</li>
     <li>a quarter cup of milk; and</li>
     <li>3 drops of pure vanilla extract</li>
  </ul>
  </p>
  <!-- P with accompanying list -->
  <p>The ingredients for for microwave fudge are:</p>
   <ul>
      <li>1 stick of butter</li>
      <li>1 cup of confectioner's sugar;</li>
      <li>half a cup of powdered cocoa;</li>
      <li>a quarter cup of milk; and</li>
      <li>3 drops of pure vanilla extract</li>
   </ul>
  <!-- repair for P with accompanying list: addition of ARIA -->
  <p id="p3">The ingredients for microwave fudge are:</p>
   <ul aria-labelledby="#p3">
      <li>1 stick of butter</li>
      <li>1 cup of confectioner's sugar;</li>
      <li>half a cup of powdered cocoa;</li>
      <li>a quarter cup of milk; and</li>
      <li>3 drops of pure vanilla extract</li>
   </ul>

P with nested UL (Aristotle's Poetics Example)

  
  <p id="XVp1">
  <q for="source01" id="XVp1q1"
  href="http://www.aristotle.org/poetics/html/XV.html"
  >In respect of Character</q>, wrote Aristotle, <q 
  for="source01">there are four things to be aimed at</q>:
  <ul>
  <li>First, and according to Aristotle, <q for="source01"
  >most important</q>, it must be good</li>
  <li>The second thing is <q for="source01">propriety</q>.</li<
  <li>Thirdly, <q for="source01">character must be true to life: 
  for this is a distinct thing from goodness and propriety</q>;</li>
  <li>The fourth point is consistency: <q for="source01">for though 
  the subject of the imitation, who suggested the type, be 
  inconsistent, still he must be consistently inconsistent.</q></li>
  </ul>
  </p>
  <!-- ... -->
  <ol>
  <li><cite id="source01">Aristotle. <em>The Poetics</em>. S.H. 
  Butcher, <abbr title="translator">trans.</abbr></cite></li>
  </ol>

OL in P: with CITE and cite Proposed Markup Reform

Example Explanation: In the following example, an OL is embedded in a P. Note that the list items contain quotes (marked with Q; the work which is cited is marked up using the CITE element, which contains an id value; the cite attribute used in conjunction with the Q uses an IDREF to point to the work from which each quote was cited. Note, as well, that each Q declaration can be targeted at the source of the quote using the universal attribute href or src, as can the CITE declaration.

  <p>
  As Marx and Engles wrote in <cite id="cite10" 
  src="http://www.marxism.info/manifesto.html">The Communist 
  Manifesto</cite>, following the forcible overthorow of the extant 
  order, the old order <strong>must</strong> immediately be replaced 
  with the following program:

  <ol>
  <li>expropriation of landed property, and the use of land rents to 
  defray state expenditures;</li>

  <li>a <q cite="#cite10">vigorously graded</q> income tax;</li>

  <li>abolition of the right of inheritence</li>

  <li>confiscation of the properties of all emigrees and rebels</li>

  <li>centralization of credit in the hands of the state, by means of 
  a <q cite="#cite10">national bank</q> with state capital and an 
  exclusive monopoly;</li>

  <li>centralization of the means of transportin the hands of the 
  state;</li>

  <li>increase of national factories and means of production, 
  cultivation of uncultivated land, and improvement of cultivated land 
  in accodance with <q cite="#cite10">a general plan</q></li>

  <li>universal and equal obligation to work, including the organization 
  of <q cite="#cite10">industrial armies</q>, especially for 
  agriculture</li>

  <li>agriculture and urban industr to workd <q cite="#cite10">hand 
  in hand</q>, in such a way -- by degrees -- to obliderate the 
  distinction between town and country;</li>

  <li>public and free education of all children, abolition of factory 
  work for children <q cite="#cite10">in its present form</q>, 
  education and material production were to be combined;</li>
  </ol>

  </p>
</pre

----