Databases
StackOverflow2013
Postsdbo
POMarking up a search result list with HTML5 semantics
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMarking up a search result list with HTML5 semantics
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAdi
    1. USJohan
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTDuplicate
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMarking up a search result list with HTML5 semantics
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMarking up a search result list with HTML5 semantics
      1. USJohan
      1. VTBountyStart
    3. VO
      singulars
      1. POMarking up a search result list with HTML5 semantics
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO“I really want every single detail to be perfect.” Good on you, but you’re talking about semantics, i.e. meaning. There’s no such thing as perfect meaning. Meaning is just an agreement between people that something represents something else.
      singulars
      1. POMarking up a search result list with HTML5 semantics
      1. USPaul D. Waite
    2. COThat makes sense. What I want is a perfect template for such an agreement on how to mark up a search result list. It should be perfectly clear between people (or robots) that it is a search result list and nothing else.
      singulars
      1. POMarking up a search result list with HTML5 semantics
      1. USJohan
    3. CO“It should be perfectly clear between people (or robots) that it is a search result list and nothing else.” As it's not predefined what a search result list should look like, I think many people can just *guess* it's such a thing, especially if you make it look like one (but that's a CSS issue), but you can never be sure a robot will dissect it as a search result list. It could represent a list of articles on your site as well, no matter which HTML 5 elements you use.
      singulars
      1. POMarking up a search result list with HTML5 semantics
      1. USMarcel Korpel
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload