さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】aside要素について

Pocket
LINEで送る

HTML5におけるaside要素の使用例を紹介します。

aside要素は、主要なコンテンツと少し関連性のある内容をマークアップします。具体的にはサイドメニューや広告等で使用します。

<aside>
  <h2>記事検索</h2>
  <form method="get" action="index.php">
    <input type="hidden" name="amount" value="0" />
    <input type="hidden" name="blogid" value="1" />
    <input name="query" alt="検索キーワード" class="formfield" size="10" maxlength="60" accesskey="4" value="" />
    <input type="submit" alt="検索" value="検索" class="formbutton" />
  </form>
  
  <h2>最新記事</h2>
  <ul>
    <li><a href="item1">記事1</a></li>
    <li><a href="item2">記事2</a></li>
    <li><a href="item3">記事3</a></li>
  </ul>
  
  <h2>カテゴリー</h2>
  <ul>
    <li><a href="category1">カテゴリー1</a></li>
    <li><a href="category2">カテゴリー2</a></li>
    <li><a href="category3">カテゴリー3</a></li>
  </ul>
  
  <h2>アーカイブ</h2>
  <ul>
    <li><a href="archive1">2011年5月</a></li>
    <li><a href="archive2">2011年4月</a></li>
    <li><a href="archive3">2011年3月</a></li>
  </ul>
</aside>

上記例のように、検索窓、最新記事、カテゴリー、アーカイブなど、主要コンテンツであるブログ記事記事を補足したり、付随するものをasideでマークアップします。

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容