sitemap-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
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.
There would be no difference here really between websites and webapps, both use HTML elements for nav in the same way.


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


Line 21: Line 19:


=== apple.com ===
=== apple.com ===
Apple use the same construct.
Apple use the same construct.


Line 34: Line 31:


=== instapaper.com ===
=== instapaper.com ===
Subjectively not so semantic in terms of markup.
Subjectively not so semantic in terms of markup.


Line 44: Line 40:
</div>
</div>
</nowiki></pre>
</nowiki></pre>
== Existing practices and patterns ==
While the semantic markup differs slightly between these different example mechanisms, and many others, a common theme is the use of the link element.  We have always used the same for our own sites.
== Proposal ==
** [[sitemap-formats]]
** [[sitemap-brainstorming]]
** [[sitemap-issues]]

Revision as of 16:38, 20 April 2012

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

Per 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.co.uk

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.com

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.com

Subjectively not so semantic in terms of markup.

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

Existing practices and patterns

While the semantic markup differs slightly between these different example mechanisms, and many others, a common theme is the use of the link element. We have always used the same for our own sites.

Proposal