Search code examples
htmlelementsemantic-markup

Proper element for lemmas, theorems, etc in mathematical text?


Often in mathematical texts there are small colored blocks introducing a lemma, theorem, definition or similar, followed by the text to prove it. Here's a short example (from Linear Algebra and Its Applications, 4th Edition by D. Lay):


Sets of Two or More Vectors

The proof of the next theorem is similar to the solution of Example 3. Details are given at the end of this section.

Theorem 7: Characterization of Linearly Dependent Sets

An indexed set S = {v1, ..., vp} of two or more vectors is linearly dependent if and only if at least one of the vectors in S is a linear combination of the others. In fact, if S is linearly dependent and v10, then some vj (with j > 1) is a linear combination of the preceding vectors, v1, ..., vj-1.

Warning: Theorem 7 does not say that every vector in a linearly dependent set is a linear combination of the preceding vectors. A vector in a linearly dependent set may fail to be a linear combination of the other vectors. See Practice Problem 3.


What is the proper element to use for such a block?

Often <blockquote> is used (as I did above), but I feel that this is wrong - it's not necessarily a quotation. I could use a <div>, but I was wondering if there was a proper semantical element.


Solution

  • I guess that would depend on how you want to structure the content. I can think of multiple options instead of using a blockquote:

    • Using figure (and figcaption for the title):

      <figure>
          <figcaption>Theorem 7: Characterization of Linearly Dependent Sets</figcaption>
          <p>
              An indexed set S = {v1, ..., vp} of two or more vectors is linearly  
              dependent if and only if at least one of the vectors in S is a linear  
              combination of the others. In fact, if S is linearly dependent and v1 ≠ 0, 
              then some vj (with j > 1) is a linear combination of the preceding 
              vectors, v1, ..., vj-1.
          </p>
      </figure>
      
    • Using a section:

      <section>
          <h3>Theorem 7: Characterization of Linearly Dependent Sets</h3>
          <p>
              An indexed set S = {v1, ..., vp} of two or more vectors is linearly  
              dependent if and only if at least one of the vectors in S is a linear  
              combination of the others. In fact, if S is linearly dependent and v1 ≠ 0, 
              then some vj (with j > 1) is a linear combination of the preceding 
              vectors, v1, ..., vj-1.
          </p>
      </section>
      
    • Using dfn (in combination with the above):

      <section>
          <dfn title="Characterization of Linearly Dependent Sets">
              Theorem 7: Characterization of Linearly Dependent Sets
          </dfn>
          <p>
              An indexed set S = {v1, ..., vp} of two or more vectors is linearly  
              dependent if and only if at least one of the vectors in S is a linear  
              combination of the others. In fact, if S is linearly dependent and v1 ≠ 0, 
              then some vj (with j > 1) is a linear combination of the preceding 
              vectors, v1, ..., vj-1.
          </p>
      </section>
      

    Although figure/figcaption looks like an easy choice (it would have been my first pick), it may not be the best in this particular case. According to the documentation (bold part highlighted by me):

    The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

    In the case of the theorem, moving the figure away from the main flow would actually affect the document's meaning. So I would probably go for the last option (section + dfn).


    Anyway, whatever your final choice is, it would be good to add the attributes role="definition" and aria-labelledby to specify that the section is in fact a definition of a term or concept and to point to the theorem title.

    For example:

    <section>
        <dfn id="theorem7" title="Characterization of Linearly Dependent Sets">
            Theorem 7: Characterization of Linearly Dependent Sets
        </dfn>
        <p role="definition" aria-labelledby="theorem7">
            An indexed set S = {v1, ..., vp} of two or more vectors is linearly  
            dependent if and only if at least one of the vectors in S is a linear  
            combination of the others. In fact, if S is linearly dependent and v1 ≠ 0, 
            then some vj (with j > 1) is a linear combination of the preceding 
            vectors, v1, ..., vj-1.
        </p>
    </section>