addressとtimeタグについて

質問

2カラムレイアウトのサイドバーに会社名を入れて表示したい場合は、下記のような記述でよいでしょうか。
会社名や、住所、電話番号は、ダミーです。

<section>
　<h3>会社名: 株式会社***</h3>
　<address>
　お問い合わせ<br>
　郵便番号: 111-0001<br>
　住所: 東京都品川区大崎*-*-*<br>
　TEL: 03-1234-****<br>
　</address>
　<time>営業時間: 10：00-18：00<br>
　定休日: 土日祝</time>
</section>

回答No.2

ORUKA1951 · ベストアンサー

<section>
<h3>問い合わせ先</h3>
<p>郵便番号:111-0001</p>
<p>住所:東京都品川区大崎**-*</p>
<p>営業時間:<time>10：00</time>-<time>18：00</time></p>
<p>定休日:土日祝</p>
<address>
メールでのお問い合わせは、 <A href="contact">こちら</A>。
</address>
</section>

結構厳しい質問ですね。

　これだけの条件では、判断が難しいです。
　その文書全体での「問い合わせ先」というグループ(ブロック)がどのような位置を占めるかによっても判断は変わるでしょう。
　section内なら、figureのように「他から参照される添付資料ブロック」でも良いでしょうし、独立した記事としてのarticle、あるいは本文とは直接関係ないasideかも知れません。
　sectionは、住所録のように同じものがたくさんあるとき以外は、しっくりこないような気がしますが、文章全体の中ではsectionのほうが適切な場合もあるのではないかと想像もできます。
<section>
　<section>
　　商品仕様
　</section>
　<section>
　　購入先
　</section>
　<section>
　　アフターサービス
　</section>
　<section>
　　問い合わせ先
　</section>
</section>
　とか・・・

ただ、その場合は、
<dl>
　<dt>問い合わせ先</dt>
　<dd class="zip">郵便番号:111-0001</dd>
　<dd class="address">住所:東京都品川区大崎*-*-*</dd>
　<dd class="open">営業時間:<time>10：00</time>-<time>18：00</time></dd>
　<dd class="close">定休日:土日祝</dd>
</dl>
<address>メールでのお問い合わせは、 <A href="contact">こちら</A>。</address>
とかの方がよい場合もあるでしょう。

　またサイト全体でマークアップは統一することも考慮に入れる必要があります。でないとスタイルシートがややこしくなる。

　私はこの様な場面で悩んだときは、スタイルシートをすべて取っ払って画像も外して全体を眺めてみます。HTML4以前のものでしたらLynx for Win32 (by patakuti): Project Home Page ( http://lynx-win32-pata.sourceforge.jp/index-ja.html )を使います。

お礼

お返事が遅くなり申し訳ありません。

まず、ご指摘の所から補足いたします。

2カラムのレイアウトのサイドメニューとして記述しております。

実際には、下記の様な記述になります。

<div id="content">

<article>

</article>

<aside>

<section>

<dl>
　<dt>問い合わせ先</dt>
　<dd class="zip">郵便番号:111-0001</dd>
　<dd class="address">住所:東京都品川区大崎*-*-*</dd>
　<dd class="open">営業時間:<time>10：00</time>-<time>18：00</time></dd>
　<dd class="close">定休日:土日祝</dd>
</dl>
<address>メールでのお問い合わせは、 <A href="contact">こちら</A>。</address>

</section>

</aside>

</div><!-- end content -->

上記の様な感じです。

この場合、下記の記述はいかがでしょうか。

<section>

<h2>問い合わせ先</h2>

<dl>

　<dt>会社名株式会社</dt>

　<dd>郵便番号:111-0001</dd>

　<dd>住所:東京都品川区大崎*-*-*</dd>

　<dd>TEL. 03-1234-****</dd>

　<dd>営業時間:<time>10：00</time>-<time>18：00</time></dd>

　<dd>定休日:土日祝</dd>

</dl>

<address>メールでのお問い合わせは、<A href="/contact/">こちら</A>。</address>

</section>

分かりやすくする為クラス名をはずしております。

補足

お返事が遅くなり申し訳ありません。

まず、ご指摘の所から補足いたします。

2カラムのレイアウトのサイドメニューとして記述しております。

実際には、下記の様な記述になります。

<div id="content">

<article>

</article>

<aside>

<section>

<dl>
　<dt>問い合わせ先</dt>
　<dd class="zip">郵便番号:111-0001</dd>
　<dd class="address">住所:東京都品川区大崎*-*-*</dd>
　<dd class="open">営業時間:<time>10：00</time>-<time>18：00</time></dd>
　<dd class="close">定休日:土日祝</dd>
</dl>
<address>メールでのお問い合わせは、 <A href="contact">こちら</A>。</address>

</section>

</aside>

</div><!-- end content -->

上記の様な感じです。

この場合、下記の記述はいかがでしょうか。

<section>

<h2>問い合わせ先</h2>

<dl>

　<dt>会社名株式会社</dt>

　<dd>郵便番号:111-0001</dd>

　<dd>住所:東京都品川区大崎*-*-*</dd>

　<dd>TEL. 03-1234-****</dd>

　<dd>営業時間:<time>10：00</time>-<time>18：00</time></dd>

　<dd>定休日:土日祝</dd>

</dl>

<address>メールでのお問い合わせは、<A href="/contact/">こちら</A>。</address>

</section>

分かりやすくする為クラス名をはずしております。

回答No.1

ORUKA1951

timeには日付や時間が入りますが、それ以外は入れません。
4.6 Text-level semantics — HTML5 ( http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element )
<p><span>営業時間:</span><time>10：00</time>-<time>18：00</time></p>
とか
<section>
　<h3>問い合わせ先</h3>
　<dl>
　　<dt>郵便番号</dt>
　　<dd class="zip">111-0001</dd>
　　<dt>住所:</dt>
　　<dd><address>東京都品川区大崎*-*-*</address></dd>
　　<dt>営業時間</dt>
　　<dd><time>10：00</time>-<time>18：00</time></dd>
　　<dt>定休日</dt>
　</dl>
</section>
になろうかと・・・原則としてBRは使いません。!!!使うべきではありません。dtとddを横並びにするとかの配置や行間などはスタイルシートで指定します。通常の文書では<BR>は登場しないはずです。

　なお、HTML5は策定中で、まだまだ未確定部分が多すぎます。timeの扱いも毎回のように変更されている。対応ブラウザも少ないので当面は
<div class="section">
　<h3>問い合わせ先</h3>
　<dl>
　　<dt>郵便番号</dt>
　　<dd class="zip">111-0001</dd>
　　<dt>住所:</dt>
　　<dd><address>東京都品川区大崎*-*-*</address></dd>
　　<dt>営業時間</dt>
　　<dd><span class="time">10：00</sapn>-<span class="time">18：00</span></dd>
　　<dt>定休日</dt>
　</dl>
</div>
がよろしいかと・・

お礼

早速の回答ありがとうございます。

4.6 Text-level semantics — HTML5　非常に参考になりました。

今後は、上記サイトで疑問が解決できると思います。

また、上記サイトの4.4.10 The address elementを確認しました。

ご指摘の通り<br>は使いたく無かったのですが、addressの所でどうも引っかかってしまい、仕方なく使用しました。

The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)

と記述されているという事と

<footer>
<address>
For more details, contact
<a href="mailto:js@example.com">John Smith</a>.
</address>
<p><small>© copyright 2038 Example Corp.</small></p>
</footer>

という使い方も可能と記述されてます。

再確認ですが、

<section>
<h3>問い合わせ先</h3>
<p>郵便番号:111-0001</p>
<p>住所:東京都品川区大崎*-*-*</p>
<p>営業時間:<time>10：00</time>-<time>18：00</time></p>
<p>定休日:土日祝</p>
<address>
メールでのお問い合わせは、 <A href="contact">こちら</A>。
</address>
</section>

というのは、いかがでしょうか。