Skip to content

Instantly share code, notes, and snippets.

@alienlebarge
Last active July 29, 2020 18:46
Show Gist options
  • Save alienlebarge/8234227 to your computer and use it in GitHub Desktop.
Save alienlebarge/8234227 to your computer and use it in GitHub Desktop.
HTML5 structure for a search result page
<section>
<header>
<h2>Results for <kbd>this terms</kbd></h2>
</header>
<!-- list of results -->
<ol>
<!-- First result -->
<li>
<article>
<header>
<h3>
<cite>
<a href="http://addressofthepage.ch/">This is a result</a>
</cite>
</h3>
</header>
<blockquote cite="http://addressofthepage.ch/">
<p>So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p>
<footer>
<p>Published <time datetime="2010-07-15T13:15:05-02:00">MMMM DDth, YYYY</time> at the <abbr title="Uniform Resource Locator">URL</abbr> <a href="http://addressofthepage.ch/">http://addressofthepage.ch/</a></p>
</footer>
</blockquote>
</article>
</li>
<!-- Second result ... and so on -->
<li>...</li>
</ol>
</section>

Search result page in HTML5

I'm trying to figure what is the best way to code a search results page in HTML5

The main questions are

  1. <header> mentions the search terms. What is the best tag to use? <kbd>?
  2. Is the <cite> tag related to the <blockquote> if it is positioned in the <header>?
  3. Is not better to put the <cite> in blockquote > footer like <p>[...] at the URL <cite><a href="http://addressofthepage.ch/">http://addressofthepage.ch/</a></cite></p>

I've asked this on the web

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment