🐡

個人的に今まで使っていなかったHTMLタグまとめ

2025/02/02に公開
2

<article>

以下MDN

<article> は HTML の要素で、文書、ページ、アプリケーション、サイトなどの中で自己完結しており、(集合したものの中で)個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。

つまり、記事、ブログ投稿、コメント、など、それ自体で完結する独立したコンテンツを表す際に使用すれば良いということですね。
以下のように

<article>
  <h2>記事のタイトル</h2>
  <p>記事の本文...</p>
  <footer>
    <p>投稿日: 2024年2月2日</p>
    <p>著者: 山田太郎</p>
  </footer>
</article>

入れ子にもできる

<article>
  <h2>ブログ記事</h2>
  <p>本文...</p>
  
  <article>
    <h3>この記事へのコメント</h3>
    <p>コメント内容...</p>
  </article>
</article>

実際に使われているサイト

<aside>

以下MDN

<aside> は HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。

asideタグはサイドバーなどのメインコンテンツと間接的な関係がある、補足的なコンテンツを表す際に使用されます。

サイドバー

<aside>
  <h2>関連リンク</h2>
  <ul>
    <li><a href="#">記事A</a></li>
    <li><a href="#">記事B</a></li>
    <li><a href="#">記事C</a></li>
  </ul>
</aside>

広告

広告にも利用されるようです。
今回の例はテキスト広告ですが、バナー広告にも利用されるようです。

<aside>
  <h2>スポンサーリンク</h2>
  <ul>
    <li><a href="https://example.com">おすすめの商品A</a></li>
    <li><a href="https://example.com">お得なサービスB</a></li>
  </ul>
</aside>

実際に使われているサイト

<hgroup>

以下MDN

<hgroup> は HTML の要素で、見出しとそれに関連する内容を表します。これは 1 つの <h1>–<h6> 要素と、1 つ以上の <p> 要素をグループ化します

こちらは主題と副題のマークアップに利用できるタグです。

<hgroup>
  <h1>メインタイトル</h1>
  <p>サブタイトル</p>
</hgroup>

こちら残念ながら実際に使われているサイトを見つけることができませんでした…すみません。

<fieldset>、<legend>

<fieldset> は HTML の要素で、ウェブフォーム内のラベル (<label>) などのようにいくつかのコントロールをグループ化するために使用します。

<legend> は HTML の要素で、その親要素である <fieldset> の内容のキャプションを表します。

<fieldset>はinputなどのフォームの入力項目をグループ化するためのもので、<legend>は<fieledset>でグループ化された入力項目にタイトルやキャプションをつけるためのものです。

<fieldset>
  <legend>お客様情報</legend>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
</fieldset>

実際に使われているサイト

まとめ

セマンティックなコーディングをするために今回紹介した以外のタグも積極的に調べながら使っていきたいと思います。
<fieldset>、<legend>、<hgroup>を実際に使っているサイトを見つけられなかったので、使ったよという方や、見つけたよという方はコメントいただけると助かります。

Discussion

吉川雅彦吉川雅彦

fieldsetlegend は有名どころだとAppleのサイトで使われてますよ! 購入画面に進んだあとのラジオボタンの見出しなどです。アクセシビリティに積極的なところは使っているのではないでしょうか。

hgrouphttps://www.tak-dcxi.com/article/use-hgroup-for-marking-up-the-main-heading-and-subheading にあるように仕様が変わったりなどして積極的には使われてない気がしています。

hanatsuyohanatsuyo

コメントありがとうございます。
なるほどAppleで使われているんですね、追記しておきます!
hgroupについても補足ありがとうございます!