webサイトのサイドバーに表示されている外部サイトへのバナーや
メインコンテンツと関係性が低いものをマークアップするときに
使用するのが<aside>タグです。<aside>タグ内の
物が表示されない場合でも、メインコンテンツに影響がでないように
しなければなりません。
主にこのタグが使わるのは、バナーなどの広告エリア、
Amazon内の「この商品をチェックした人は、こちらの商品も
見ています。」などの商品紹介エリアです。メインコンテンツとは
関連性が低い<aside>タグ内のものは<article>タグの
外へ書きます。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> </head> <body> <article> <h1>ロシア</h1> <p>世界には様々な国があります。このブログの読者の方は ロシアを訪れた方はいますか。</p> <section> <h2>モスクワ</h2> <p>ロシアで一番大きな都市です。ロシア経済、政治の 中心地です。・・・・以下省略</p> </section> <section> <h2>サンクトペテルブルグ</h2> <p>ロシアで2番目に大きな町です。おととしの10月 私はこの都市に行きました。歴史観が溢れる町で 美術館が多く、町も綺麗です。目玉はエルミタージュ美術館です。 世界中からの作品が見れ、日本関連のものもあります。 日本の刀や鎧も飾られています。・・・以下省略</p> </section> <section> <h2>ニージニ・ノブゴロド</h2> ・・記事詳細・・ </section> <section> <h2>エカテリンブルグ</h2> ・・記事詳細・・ </section> <article> <h2>コメント</h2> <p>ロシアに行く日本人が少ないため有益な情報を・・・</p> </article> </article> <aside> <h1>英会話スクール情報</h1> <ul> <li><a href="#">無料英会話レッスン</a></li> <li><a href="#">TOEIC講座</a></li> <li><a href="#">TOFEL講座</a></li> </ul> </aside> </body> </html> |