Difference between revisions of "sitemap-examples"

From Microformats Wiki
sitemap-examples
Jump to navigation Jump to search
(New page: <entry-title>Sitemap Examples</entry-title> Per the microformats The microformats process this page documents common examples of HTML navigation mechanisms out of which we may want to construct a site...)
 
Line 4: Line 4:
  
 
== HTML navigation mechanism examples ==
 
== HTML navigation mechanism examples ==
 +
 +
There would be no difference here really between websites and webapps, both use HTML elements for nav in the same way.
  
 
=== BBC ===
 
=== BBC ===
 +
 +
As per any decent POSH citizen the BBC's website uses a simple list element for navigation.  The BBC admirably use very standard attributes.
 +
 +
<pre><nowiki>
 +
<ul id="blq-nav-main">
 +
  <li id="blq-nav-news">
 +
    <a href="http://www.bbc.co.uk/news/">News</a>
 +
  </li>
 +
  ...
 +
</ul>
 +
</nowiki></pre>
 +
 +
=== Apple ===
 +
 +
Apple use the same construct.
 +
 +
<pre><nowiki>
 +
<ul id="globalnav" role="navigation">
 +
  <li id="gn_store">
 +
    <a href="http://store.apple.com/uk"><span>Store</span></a>
 +
  </li>
 +
  ...
 +
</ul>
 +
</nowiki></pre>
 +
 +
=== Instapaper ===
 +
 +
Subjectively not so semantic in terms of markup.
 +
 +
<pre><nowiki>
 +
<div id="userpanel">
 +
  <a href="/extras">Extras</a>
 +
<span>.</span>
 +
  ...
 +
</div>
 +
</nowiki></pre>

Revision as of 14:15, 20 April 2012

<entry-title>Sitemap Examples</entry-title>

Per the microformats The microformats process this page documents common examples of HTML navigation mechanisms out of which we may want to construct a sitemap.xml.

HTML navigation mechanism examples

There would be no difference here really between websites and webapps, both use HTML elements for nav in the same way.

BBC

As per any decent POSH citizen the BBC's website uses a simple list element for navigation. The BBC admirably use very standard attributes.

<ul id="blq-nav-main">
  <li id="blq-nav-news">
    <a href="http://www.bbc.co.uk/news/">News</a>
  </li>
  ...
</ul>

Apple

Apple use the same construct.

<ul id="globalnav" role="navigation">
  <li id="gn_store">
    <a href="http://store.apple.com/uk"><span>Store</span></a>
  </li>
  ...
</ul>

Instapaper

Subjectively not so semantic in terms of markup.

<div id="userpanel">
  <a href="/extras">Extras</a>
 <span>.</span>
  ...
</div>