書籍学習のアウトプット：武器になるHTML
技術評論者から出版されている武器になるHTMLを読み、HTMLについて学び直しました。
既知の内容も多かったですが、セマンティックなHTMLの使用法について体系的にまとめられており、情報の整理に役立ちました。特に今後コーディングを行う際に気をつけようと思った点、意識したい点についてまとめています。
emタグとstrongタグの使い分け
なんとなくstrongタグを使用することが多く、明確な使い分けができておりませんでした。以下の使い分けをすると適切なマークアップとなるようです。
| タグ | 役割 |
|---|---|
| em | 強調したい単語やテキスト |
| strong | 重要性や緊急性を表す文章 |
言葉だけを見るとあまりパッとイメージできませんが、例文を見るとわかりやすいです。次のような場合にはemが適しています。
<!-- 例① --><p>デザインデータをもとに、<em>正確に</em>コーディングを行います。</p>
<!-- 例② --><p>デザインデータをもとに、正確に<em>コーディング</em>を行います。</p>上の例①では、コーディングの速さや丁寧さではなく「正確に」コーディングができることを強調しています。 例②では、デザインでもディレクションでもなく「コーディング」ができることを強調しています。
一方でstrongタグは以下のようなケースで使用が推奨されています。
<strong>定休日は火曜日の午後です。</strong>重要性や緊急性を表すメッセージで、他の箇所よりも優先して読んでほしい文章に使用します。警告や注意などに使用されることが多そうです。
単に太字のテキストだからstrongタグだろうと判断せず、前後の文脈から文章の役割を確認してより適切なタグを使用することが求められます。
サイドコメントでのsmallタグの使用
コピーライトや免責事項などのサイドコメントにはsmallタグを使用することが推奨されています。サイドコメントとは小さな文字で表す副次的な表記のことです。
サイドコメントの範囲を判断するのは難しいですが、ベースとなるテキストのフォントサイズより小さな文字で補助的に使用する文章に積極的に使用していこうと思います。
<!-- ラベルの補助的な文章に使用した例 --><div class="label"> <label>電話番号</label> <small>ハイフンなしでご入力ください</small></div><input type="tel" />aタグのコンテンツモデル
aタグのコンテンツモデルはトランスペアレント（=透明）であり、aタグは存在しないものとして扱われます。
例えばaタグの親要素がdivタグの場合、aタグの子要素にはdivタグの配下に置ける要素（フロー・コンテンツ）を全て含めることができます。
<!-- aタグの親要素がdivタグ --><div> <a href="/"> <h2>見出し</h2> <p>リンクのテキスト</p> </a></div>
<!-- 構造上は以下と同じとみなされる --><div> <h2>見出し</h2> <p>テキスト</p></div>一方、aタグの親要素がpタグの場合は、aタグの子要素にはpタグの配下に置ける要素（フレージング・コンテンツ）のみを許容します。そのため以下は最適ではありません。
<!-- aタグの親要素がpタグ --><p> <a href="/"> <h2>見出し</h2> <p>リンクのテキスト</p> </a></p>aタグの中にはspanタグしか許容しないようなマークアップを時々見かけますが、適切な要素でaタグを囲い、中に配置する要素も適切なタグを使用した方が良さそうです。
<!-- aタグの子要素が一律spanタグ --><a href="/"> <span>見出し</span> <span>リンクのテキスト</span> <span>アイコン</span></a>timeタグの属性
timeタグには基本的にdatetime属性を設定する必要がありますが、特定のフォーマットのテキスト（=コンピューターが理解できる日時の形式）の場合は、datetime属性がなくても日時として認識されます。
<time>2024-07-27</time>上の例では「2024-07-28」はコンピューターが理解できるISO 8601形式の日時であるため、datetime属性がなくても検索エンジンやスクリーンリーダーで日時として認識されます。
ハイフン区切りでない「2024.7.27」はコンピューターが理解できる日時の形式ではないため、datetime属性を設定する必要があります。
<time datetime="2024-07-27">2024.7.27</time>ただ無用な事故を防ぐためにも、全てのケースでdatetime属性を設定する方が良さそうです。コンピューターが理解できる日時の形式を要素に配置する場合であっても、datetime属性を使ってはいけないというルールは存在しません。
figureタグの使いどころ
なかったとしても本文の流れは成り立つ画像や、本文とは関連しているが切り離しても支障がなく単体で成り立つ画像への使用が推奨されます。
MDNのfigureタグのページをみると、「図表などの自己完結型のコンテンツを表し、（中略）本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用いる」とあります。
要するに本文には関連するが、文章の一部に該当しない図表や画像には、figureタグを使用することが推奨されています。
<figure> <img src="cat.jpg" alt="猫の写真" /> <figcaption>我が家のペット猫「タマ」</figcaption></figure>逆に図表や画像が文章の一部に該当する（＝インラインで配置する）場合は、figureタグの使用は不適切です。
<!-- NG --><p> これは段落の中の <figure><img src="image.jpg" alt="画像" /></figure> 画像です。</p>
<!-- OK --><p>これは段落の中の<img src="image.jpg" alt="画像" />画像です。</p>また単なる装飾目的の画像を表示する場合にもfigureタグは不適切です。
<figure> <img src="background-pattern.jpg" alt="背景パターン" /></figure>少し脱線しますが、レイアウト目的で画像をpタグやdivタグで無意識に囲うことも多いと思います。スクールなどでもそのように教えているところは多そうです。
<div class="l-about__img"> <img src="image.jpg" alt="画像" /></div>しかし、最近ではCSSのgirdで親要素側からレイアウトを制御することも多くなってきたので、必ずしも全てのimgタグをラッパー要素で囲う必要はないでしょう（※safariではグリッドアイテムに配置したimgタグの高さがおかしくなることがあるので注意が必要です）。
行と列に見出しがある表ではth要素にscope属性をつける
次のように行と列の双方に見出しがある表では、thタグにscope属性をつけることが推奨されています。scope属性を設定することで見出しと対応するセルの関係がわかりやすくなります。
scope="col"は同じ列のセルがこの見出しの対象となり、scope="row"は同じ行のセルがこの見出しの対象となります。
<table> <tr> <th></th> <th scope="col">月曜</th> <th scope="col">火曜</th> </tr> <tr> <th scope="row">Aランチ</th> <td>ハンバーグ</td> <td>お好み焼き</td> </tr> <tr> <th scope="row">Bランチ</th> <td>生姜焼き</td> <td>ラーメン</td> </tr> ...</table>見出しの対応範囲を明示的に指定することで表の構造がよりわかりやすくなり、アクセシビリティが向上しそうです。
addressタグの使い方
名前からして住所等の表記に使用することが前提かなと思っていましたが、正しくはサイトの連絡先情報への使用が推奨されています。
単なる文章の一部としての住所ではなく、サイトや記事の連絡先情報として適切な住所が含まれる場合に使用するようです。
<footer> <address> <p>サイトの名前</p> <p>大阪府大阪市中央区〜</p> <p>0612345678</p> </address> <small>コピーライト</small></footer>URLの正規化
なんとなく使用していたcanonicalですが、ようやく理解が深まりました。
原則としてWebページは複数のURLからアクセスすることができます（例えば先頭に「www」が存在する場合や、末尾に「/index.html」が存在する場合など）。
このこと自体は問題ないですが、同じページにアクセスできる複数のURLが存在していると、検索エンジンはページが重複しているとみなします。結果としてそのページの評価が分散されてしまいます。
そのためrel属性のcanonicalを設定し、正規のURLをページ毎に指定してあげる必要があります。SEO上とても重要な理由が腑に落ちました。
<head> ... <link rel="canonical" href="https://code.vool.jp/"></head>