title: Is it semantically correct to use a button in a table caption in HTML5?
body: <p>I have a matrix of product data.</p>
  
  <p>My goal is to:</p>
  
  <ul>
  <li>display the matrix using HTML5 in a tabular format</li>
  <li>display a left-aligned "title" above the data that describes it</li>
  <li>display a right-aligned "add" button, vertically aligned with the title, which facilitates the addition of rows to the table</li>
  <li>display a header row to describe each column of data</li>
  <li>do all of the above in a semantically "correct" way, if possible</li>
  </ul>
  
  <p>So, the end result would look similar to this:</p>
  
  <pre class="lang-none prettyprint-override"><code>--------------------------------------------------------
  |Product Catalog                         [+Add Product]|
  --------------------------------------------------------
  | Title | Cost | Weight | and | so | on | ...          |
  --------------------------------------------------------
  | Thing1| $5.99| 3 oz   | ... | ...| ...| ...          |
  | Thing2| $2.99| 2 oz   | ... | ...| ...| ...          |
  --------------------------------------------------------
  </code></pre>
  
  <p>My current code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;caption&gt;Product Catalog &lt;button style="float: right; display: block;"&gt;+Add Product&lt;/button&gt;&lt;/caption&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Title&lt;/th&gt;
              &lt;th&gt;Cost&lt;/th&gt;
              &lt;th&gt;Weight&lt;/th&gt;
              &lt;th&gt;and&lt;/th&gt;
              &lt;th&gt;so&lt;/th&gt;
              &lt;th&gt;on&lt;/th&gt;
              &lt;th&gt;...&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Thing1&lt;/td&gt;
              &lt;td&gt;$5.99&lt;/td&gt;
              &lt;td&gt;3 oz&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Thing2&lt;/td&gt;
              &lt;td&gt;$2.99&lt;/td&gt;
              &lt;td&gt;2 oz&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
              &lt;td&gt;...&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>According to the HTML5 spec, the caption element can contain any flow content, which includes buttons.</p>
  
  <p>From the spec:</p>
  
  <blockquote>
    <p>Content Model: Flow content, but with no descendant table elements</p>
  </blockquote>
  
  <p>However, the same spec defines the caption element as:</p>
  
  <blockquote>
    <p>The caption element represents the title of the table that is its parent, if it has a parent and that is a table element.</p>
  </blockquote>
  
  <p>Based on that description, it seems that a button does not belong inside of a caption, because it lends nothing to the title of the table, even though it is technically allowed.</p>
  
  <p>My questions are:
  Is it semantically "correct" to include a button inside of a table caption?  If it is not "correct", is it acceptable? Is there a more-semantically-correct way of achieving the desired result?</p>
  
  <p>I found plenty of questions/answers dealing with table semantics, but most did not deal with buttons on the table.  </p>
  
  <p><a href="https://stackoverflow.com/questions/7373692/is-it-semantically-correct-to-have-an-action-button-column-in-an-html-table">This question/answer</a> asks about buttons in a table, but it is specific to buttons inside of a "cell", not the caption.</p>
  
  <p>HTML5 Specs:</p>
  
  <ul>
  <li>caption element: <a href="https://www.w3.org/TR/html5/tabular-data.html#the-caption-element" rel="nofollow noreferrer">https://www.w3.org/TR/html5/tabular-data.html#the-caption-element</a></li>
  <li>flow-content: <a href="https://www.w3.org/TR/html5/dom.html#flow-content-1" rel="nofollow noreferrer">https://www.w3.org/TR/html5/dom.html#flow-content-1</a></li>
  </ul>
  
  <p>EDIT:
  <a href="https://stackoverflow.com/questions/12959480/adding-a-toolbar-to-a-table-following-html-semantics?rq=1">This question/answer</a> seems to be of the same nature as my question, but he is asking about putting his button(s) inside of a <code>&lt;th&gt;</code>, not the table caption.</p>
  
  <p>One solution I've considered is: don't use a caption at all.  Just put a <code>&lt;h1&gt;</code> or similar header tag <em>before</em> the table tag.  The only problem with this is that the title will no longer be relative to the table.... or will it?  Actually, that might be the answer.  If I wrap the <code>&lt;h1&gt;</code> and the <code>&lt;table&gt;</code> in a <code>&lt;section&gt;</code> or perhaps a <code>&lt;div&gt;</code> then that might work?</p>
  
  <p>I'm looking for the "most-correct" way.</p>