はじめに

この記事はクイズ形式で自身のHTMLの学習をアウトプットしていきます。
問題文の条件を満たすHTMLを記述してください。

お手元のエディタに解答を入力したうえで
「▶正解」をクリックして回答を確認してください

練習問題

1番大きい見出しを追加する
見出しの文字列は「はじめに」とする

正解

<h1>はじめに</h1>

問題

第1問

汎用的なブロック要素を１つ追加する。(ID=「mainBlock」,名前=「main」）
追加したブロック要素の中に、汎用的なインライン要素を２つ追加する
インライン要素の１つ目の中身の文字は「65536は2¹⁶です。」
　(ID=「info1」,名前=「info1」,クラス名=「item」）
インライン要素の２つ目の中身の文字は「水の化学式はH₂Oです。」
　(ID=「info2」,名前=「info2」,クラス名=「item」）

正解

<div id="mainBlock" name="main">
  <span id="info_1" name="info1" class="item">65536は2<sup>16</sup>です。</span>
  <span id="info_2" name="info2" class="item">水の化学式はH<sub>2</sub>Oです。</span>
</div>

第2問

以下テーブルを作成する。(行ごとに色が違うのは考慮しなくてもよい）
なお、Noの列は行ヘッダーとする。

No	名前	握力
No	名前	左	右
1	佐藤	30	40
2	鈴木	20	50
3	高橋	25	45

正解

<table>
  <thead>
    <tr>
      <th rowspan="2">No</th>
      <th rowspan="2">名前</th>
      <th colspan="2">握力</th>
      </tr>
    <tr>
      <th>左</th>
      <th>右</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>佐藤</td>
      <td>30</td>
      <td>40</td>
    </tr>
    <tr>
      <th>2</th>
      <td>鈴木</td>
      <td>20</td>
      <td>50</td>
    </tr>
    <tr>
      <th>3</th>
      <td>高橋</td>
      <td>25</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

第3問

以下のコードのdivタグを、中身から意味を推測し適切なセマンティック要素のタグに変更する
　※変更不要と思われるdivタグも存在するので注意

<!--headタグは省略 -->
<body>
    <div>
      <img src="logo.jpg"> 
      <div style="display:inline"> 
        <a href="company.html">会社について</a>
        <a href="service.html">サービス一覧</a>
        <a href="voice.html">お客様の声</a>
        <a href="access.html">アクセス</a>
        <a href="contact.html">お問い合わせ</a>
      </div>
    </div>
    <div>
      <h1>株式会社HOGE　三原則</h1>
      <div>
        <h2>日本の未来を守る</h2>
        <p>
          ここに「日本の未来を守る」に関する文章
        </p>
      </div>
      <div>
        <h2>社員の暮らしを守る</h2>
        <p>
          ここに「社員の暮らしを守る」に関する文章
        </p>
      </div>
      <div>
        <h2>パワハラ撲滅運動</h2>
        <p>
          ここに「パワハラ撲滅運動」に関する文章
        </p>
      </div>
    </div>
    <div>
      <div>
        <div style="display:inline-block"><!--変更なし-->
          <p>商品一覧</p>
          <a href="shohinA.html" style="display:block">商品A</a>
          <a href="shohinB.html" style="display:block">商品B</a>
          <a href="shohinC.html" style="display:block">商品C</a>
        </div>
        <div style="display:inline-block"><!--変更なし-->
          <p>支店一覧</p>
          <a href="tokyo.html" style="display:block">東京本社</a>
          <a href="osaka.html" style="display:block">大阪支店</a>
          <a href="nagoya.html" style="display:block">名古屋支店</a>
        </div>
        <div style="display:inline-block"><!--変更なし-->
          <p>その他</p>
          <a href="access.html" style="display:block">アクセス</a>
          <a href="contact.html" style="display:block">問合せフォーム</a>
          <a href="policy.html" style="display:block">プライバシーポリシー</a>
        </div>
      </div>
      <span>Copyright(C) 2022 Hoge co., Ltd.</span>
    </div>
</body>

ヒント

一番最初のdivタグはロゴ画像やサイトのナビゲーションが配置されており上部にあることから、
ヘッダーを構成するブロックと推測できるためheaderタグを使用する方が適切です。

正解

<!--headタグは省略 -->
<body>
    <header>
      <img src="logo.jpg"> 
      <nav style="display:inline"> 
        <a href="company.html">会社について</a>
        <a href="service.html">サービス一覧</a>
        <a href="voice.html">お客様の声</a>
        <a href="access.html">アクセス</a>
        <a href="contact.html">お問い合わせ</a>
      </nav>
    </header>
    <main>
      <h1>株式会社HOGE　三原則</h1>
      <section>
        <h2>日本の未来を守る</h2>
        <p>
          ここに「日本の未来を守る」に関する文章
        </p>
      </section>
      <section>
        <h2>社員の暮らしを守る</h2>
        <p>
          ここに「社員の暮らしを守る」に関する文章
        </p>
      </section>
      <section>
        <h2>パワハラ撲滅運動</h2>
        <p>
          ここに「パワハラ撲滅運動」に関する文章
        </p>
      </section>
    </main>
    <footer>
      <nav>
        <div style="display:inline-block"><!--変更なし-->
          <p>商品一覧</p>
          <a href="shohinA.html" style="display:block">商品A</a>
          <a href="shohinB.html" style="display:block">商品B</a>
          <a href="shohinC.html" style="display:block">商品C</a>
        </div>
        <div style="display:inline-block"><!--変更なし-->
          <p>支店一覧</p>
          <a href="tokyo.html" style="display:block">東京本社</a>
          <a href="osaka.html" style="display:block">大阪支店</a>
          <a href="nagoya.html" style="display:block">名古屋支店</a>
        </div>
        <div style="display:inline-block"><!--変更なし-->
          <p>その他</p>
          <a href="access.html" style="display:block">アクセス</a>
          <a href="contact.html" style="display:block">問合せフォーム</a>
          <a href="policy.html" style="display:block">プライバシーポリシー</a>
        </div>
      </nav>
      <span>Copyright(C) 2022 Hoge co., Ltd.</span>
    </footer>
</body>

スタイルを指定する場合にはCSSの利用が推奨されています。
他にもセマンティックと言うには足りていない部分があるかもしれないのでお気づきの方はご指摘ください。
(name属性やclass属性の付与などにより細かい意味付けが必要そうではある)