セマンティックな HTML

セマンティックとは

https://e-words.jp/w/セマンティック.html

セマンティックとは、意味の、語義の、意味論の、などの意味を持つ英単語。形式や構造と対比して、人間にとっての意味を指し表す際に用いられる用語。

セマンティックな HTML とは

文章の構造的に適切なタグを使っている HTML。何も考えずに適当にdivタグを使うなんて言語道断

先輩からの激烈レビュー

なぜそんなことを突然思ったかというと、先輩からのレビューに衝撃を受けたからです。

レビュー

dt, ddはdlの中でしか使うべきでないというルールがあります。

HogeListItemではdt, ddを使っているのでHogeListItemはdlで囲わなければならないという暗黙のルールになるのですが、これが分かりにくいので避けたいです。

ul, liに置き換えると良いと思います。ただliもul/olの中でしか使うべきでないというルールがあるのでHogeListItemの中でliを使うべきではないです。外に出すのが良いと思います。

<ul>
  <li>
    <HogeListItem />
  </li>
</ul>

HogeListItemの中のdt,ddはdivにして良いと思います。

ソースコードを知っていないとこのレビューは意味がわからないと思いますが、内容を簡潔にまとめると

• HTML の仕様を守れ（セマンティックであれ）
• その上で誰が見てもわかりやすいコードを書け

と指摘されています。

HTML にそこまで強い気持ちを持っていなかった自分にとってこれは軽めのビンタを食らったような衝撃、それと同時に web フロントに 1 年携わってきてまだそんなことも理解していないのかと恥ずかしくなりました。

React だの JSX だの、上流の技術にはたくさん触れてきて理解は深めていたつもりでしたが、思わぬところで足を掬われた気分です。

ブログを少々セマンティックにしてみる

この反省を踏まえて、このブログのソースを修正して少し仕様を意識した構造にしてみました。例えば、トップページの記事リストのコンポーネントです。

before

<div className='drop-shadow-md rounded-lg bg-myBlogListBgColor p-8 my-2'>
  {/* 日付 */}
  <div className='text-sm'>{formatDate(date)}</div>

  {/* ブログタイトル */}
  <div className='font-bold my-1 text-xl text-myTextColor deco-underline-text cursor-pointer'>
    <Link href={`/blogs/${slug}`}>{title}</Link>
  </div>

  {/* タグ */}
  <div className='flex flex-wrap mt-5'>
    {tags.map((tag, index) => {
      return <TagCard key={index} tag={tag} />;
    })}
  </div>
</div>

適当に div タグで囲んでいるのでクソ。ブログを作っている当初は何も考えていなかった、というより意識できていなかったことが伺えます。まぁこれでもブラウザの表示的には問題はないのですが、HTML 的にはけしからんですね

after

<article className='drop-shadow-md rounded-lg bg-myBlogListBgColor p-8 my-2'>
  {/* 日付 */}
  <time dateTime={date} className='text-sm'>
    {formatDate(date)}
  </time>

  {/* ブログタイトル */}
  <h3 className='font-bold my-1 text-xl text-myTextColor deco-underline-text cursor-pointer'>
    <Link href={`/blogs/${slug}`}>{title}</Link>
  </h3>

  {/* タグ */}
  <ul className='flex flex-wrap mt-5'>
    {tags.map((tag, index) => {
      return <TagCard key={index} tag={tag} />;
    })}
  </ul>
</article>

ブログのリストのコンテンツ 1 つ 1 つは独立したコンテンツなので、articleタグで囲みます。お恥ずかしながら、articleタグがあることをこの時初めて知りました。

さらに時間を表す要素はtimeタグで囲み、datetime属性で日付を指定します。

また、articleタグ内には見出し(h1~h6)を設置した方が文書の構造が明確になるので、ブログのタイトルをh3タグで囲みます。

最後に、タグカードのリストはリストであることを明確にするためにulタグで囲み、中にliタグを設置します。

before に比べたら、すごい改善された気がする。

最後に

HTML の本とか買って全部のタグ眺めたろかなとか思ったんですが、出てきたらその都度仕様を確認して、よく使うものは覚える方針でいいのかなと思いました。

セマンティックなフロントエンジニアを目指します

では

Bye