title: Marking up a search result list with HTML5 semantics
body: <p>Making a search result list (like in Google) is not very hard, if you just need something that works. Now, however, I want to do it with perfection, using the benefits of HTML5 semantics. The goal is to define the defacto way of marking up a search result list that potentially could be used by any future search engine.</p>
  
  <p>For each hit, I want to</p>
  
  <ul>
  <li>order them by increasing number</li>
  <li>display a clickable title</li>
  <li>show a short summary</li>
  <li>display additional data like categories, publishing date and file size</li>
  </ul>
  
  <p>My first idea is something like this:</p>
  
  <pre><code>&lt;ol&gt;
    &lt;li&gt;
      &lt;article&gt;
        &lt;header&gt;
          &lt;h1&gt;
            &lt;a href="url-to-the-page.html"&gt;
              The Title of the Page
            &lt;/a&gt;
          &lt;/h1&gt;
        &lt;/header&gt;
        &lt;p&gt;A short summary of the page&lt;/p&gt;
        &lt;footer&gt;
          &lt;dl&gt;
            &lt;dt&gt;Categories&lt;/dt&gt;
            &lt;dd&gt;
              &lt;nav&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;a href="first-category.html"&gt;First category&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="second-category.html"&gt;Second category&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
            &lt;/dd&gt;
            &lt;dt&gt;File size&lt;/dt&gt;
            &lt;dd&gt;2 kB&lt;/dd&gt;
            &lt;dt&gt;Published&lt;/dt&gt;
            &lt;dd&gt;
              &lt;time datetime="2010-07-15T13:15:05-02:00" pubdate&gt;Today&lt;/time&gt;
            &lt;/dd&gt;
          &lt;/dl&gt;
        &lt;/footer&gt;
      &lt;/article&gt;
    &lt;/li&gt;
    &lt;li&gt;
      ...
    &lt;/li&gt;
    ...
  &lt;/ol&gt;
  </code></pre>
  
  <p>I am not really happy about the <code>&lt;article/&gt;</code> within the <code>&lt;li/&gt;</code>. First, the search result hit is not an article by itself, but just a very short summary of one. Second, I am not even sure you are allowed to put an article within a list.</p>
  
  <p>Maybe the <code>&lt;details/&gt;</code> and <code>&lt;summary/&gt;</code> tags are more suitable than <code>&lt;article/&gt;</code>, but I don't know if I can add a <code>&lt;footer/&gt;</code> inside that?</p>
  
  <p>All suggestions and opinions are welcome! I really want every single detail to be perfect.</p>