Zenn
📣

「ブロック要素」「インライン要素」を考えるためのマークアップクイズ

2023/03/27に公開
HTML
idea

頭の体操にどうぞ…と思って書きましたが、よいクイズではありません。らくがき程度に捉えてください。

問：次のマークアップを基礎構造とした適当だと思うマークアップパターンをコード1～6、コードa～hの中から1つ以上選んで、その理由を説明してください。

なお、マークアップの仕様はHTML Standard[1]に基づくものし、想定するデザインはカード型UI[2]とします。

<outer-wrapper>
  <box-container>
    <inner-wrapper>
      <box-title>タイトル</box-title>
      <box-text>テキスト</box-text>
    </inner-wrapper>
  </box-container>
</outer-wrapper>

コード1

<div class="outer-wrapper">
  <div class="box-container">
    <div class="inner-wrapper">
      <div class="box-title">タイトル</div>
      <div class="box-text">テキスト</div>
    </div>
  </div>
</div>

コード2

<span class="outer-wrapper">
  <a href="https://example.com/" class="box-container">
    <div class="inner-wrapper">
      <h4 class="box-title">タイトル</h4>
      <p class="box-text">テキスト</p>
    </div>
  </a>
</span>

コード3

<div class="outer-wrapper">
  <a href="https://example.com/" class="box-container">
    <div class="inner-wrapper">
      <h4 class="box-title">タイトル</h4>
      <p class="box-text">テキスト</p>
    </div>
  </a>
</div>

コード4

<div class="outer-wrapper">
  <a href="https://example.com/" class="box-container">
    <section class="inner-wrapper">
      <h4 class="box-title">タイトル</h4>
      <p class="box-text">テキスト</p>
    </section>
  </a>
</div>

コード5

<div class="outer-wrapper">
  <a href="https://example.com/" class="box-container">
    <div class="inner-wrapper">
      <div class="box-title">タイトル</div>
      <div class="box-text">テキスト</div>
    </div>
  </a>
</div>

コード6

<div class="outer-wrapper">
  <a href="https://example.com/" class="box-container">
    <span class="inner-wrapper">
      <span class="box-title">タイトル</span>
      <span class="box-text">テキスト</span>
    </span>
  </a>
</div>

コードa

<div class="outer-wrapper">
  <a href="https://example.com/" class="box-container">
    <div class="inner-wrapper">
      <div class="box-image"><img src="thumbnail.png" alt=""></div>
      <div class="box-title">タイトル</div>
      <div class="box-text">テキスト</div>
    </div>
  </a>
</div>

コードb

<div class="outer-wrapper">
  <a href="https://example.com/" class="box-container">
    <div class="inner-wrapper">
      <div class="box-title">タイトル</div>
      <div class="box-image"><img src="thumbnail.png" alt=""></div>
      <div class="box-text">テキスト</div>
    </div>
  </a>
</div>

コードc

<div class="outer-wrapper">
  <a href="https://example.com/" class="box-container">
    <div class="inner-wrapper">
      <div class="box-image"><img src="thumbnail.png" alt=""></div>
      <h4 class="box-title">タイトル</h4>
      <div class="box-text">テキスト</div>
    </div>
  </a>
</div>

コードd

<div class="outer-wrapper">
  <a href="https://example.com/" class="box-container">
    <div class="inner-wrapper">
      <h4 class="box-title">タイトル</h4>
      <div class="box-image"><img src="thumbnail.png" alt=""></div>
      <div class="box-text">テキスト</div>
    </div>
  </a>
</div>

コードe

<div class="outer-wrapper">
  <div class="box-container">
    <div class="inner-wrapper">
      <a href="https://example.com/" class="box-link-area">
        <div class="box-image"><img src="thumbnail.png" alt=""></div>
      </a>
      <div class="box-title">タイトル</div>
      <div class="box-text">テキスト</div>
    </div>
  </div>
</div>

コードf

<div class="outer-wrapper">
  <div class="box-container">
    <div class="inner-wrapper">
      <a href="https://example.com/" class="box-link-area">
        <div class="box-image"><img src="thumbnail.png" alt="サムネイル"></div>
      </a>
      <div class="box-title">タイトル</div>
      <div class="box-text">テキスト</div>
    </div>
  </div>
</div>

コードg

<div class="outer-wrapper">
  <div class="box-container">
    <div class="inner-wrapper">
      <a href="https://example.com/" class="box-link-area">
        <div class="box-image"><img src="thumbnail.png" alt=""></div>
        <div class="box-title">タイトル</div>
      </a>
      <div class="box-text">テキスト</div>
    </div>
  </div>
</div>

コードh

<div class="outer-wrapper">
  <div class="box-container">
    <div class="inner-wrapper">
      <div class="box-image"><img src="thumbnail.png" alt=""></div>
      <div class="box-title">タイトル</div>
      <div class="box-text">テキスト</div>
      <div class="box-link-area"><a href="https://example.com/">リンクボタン</a></div>
    </div>
  </div>
</div>
脚注

  1. https://html.spec.whatwg.org/multipage/ ↩︎

  2. 参考：https://getbootstrap.jp/docs/5.0/components/card/。わかりやすさのためにBootstrapを挙げますが、Bootstrapのデザインやマークアップにとらわれる必要はありません。 ↩︎

Discussion