html - メールアドレスと電話番号をマークアップする方法

Question

html5 セマンティクスを使用して、ページの連絡先部分をマークアップする正しい方法は何ですか?

<div class="contact">
    <h3>Contact me</h3>
    <p>Telephone: <span>01111 1111</span></p>
    <p>Email: <span><a href="mailto:me@me.com">me@me.com</a></span></p>
</div>

Answer 1

microformatsまたは microdata (たとえば、schema.orgの構文を使用) を使用できます。どちらも主要な検索エンジンでサポートされています。

私がこれを見たとき、それらの周りで多くの議論があったので、どれが標準であるかは確かに言えません。しかし、使用すべきはマイクロデータだと考えてください。個人的には、より多くのオプションでより柔軟であり、クラスを使用しないため、microdata を好みます。

編集whatwg のmicrodateとw3cのドラフトの 仕様は次のとおりです。

schema.org構文での microdata の使用例

<div itemscope itemtype="http://schema.org/Person">
  <p>Telephone:  <span itemprop="telephone">01111 1111</span></p>
  <p>Email: <a href="mailto:me@me.com" itemprop="email">me@me.com</a></p>
</div>

完成のために、microformats を使用した例も示します。

<div class="vcard">
    <p>Telephone:  <span class="tel">01111 1111</span></p>
    <p>Email: <a class="email" href="mailto:me@me.com">me@me.com</a></p>
</div>