HTMLやCSSを触っていると、「見出しや人物紹介をタグだけで作っていいのか？」と迷うことがあります。特に今回のように、太字タグとpタグを組み合わせたコードは一見問題なさそうに見えますが、実は構造として改善できるポイントがあります。本記事では、HTMLの正しい使い分けと、見出しやコンテンツ設計の基本について解説します。
まず結論：見出しはではなくhタグを使うべき
HTMLでは、見出しにはタグではなくh1〜h6タグを使うのが基本です。
タグはあくまで「文字を太くするための装飾」であり、構造的な意味（セマンティクス）は持っていません。
そのため、見出しとして意味を持たせたい場合はhタグを使うことが推奨されています。
タグと見出しタグの役割の違い
タグは視覚的な強調のみを目的としたインライン要素です。
一方でhタグは「この文章は見出しである」という意味を持ち、SEOやアクセシビリティにも影響します。
検索エンジンはhタグを構造情報として認識するため、重要な要素になります。
今回のコードの問題点
今回のようにで人物名を見出し代わりに使うと、構造が曖昧になります。
例えば「登場人物」という大見出しもで書くと、ページ全体の階層が分かりにくくなります。
結果として、検索エンジンにもユーザーにも内容が正しく伝わりにくくなります。
正しい構造の書き方（改善例）
例えば以下のように書くと構造が明確になります。
<h2>登場人物</h2>、<h3>上杉風太郎</h3>、<p>cv情報や説明文</p>という形です。
このように見出し階層を使うことで、読みやすさとSEOの両方が改善されます。
CSSで見た目を自由に調整できる
「hタグを使うとデザインが変わってしまう」と思うかもしれませんが、CSSで自由に調整できます。
例えばh3を太字にしたり、文字サイズを調整することでタグと同じ見た目にできます。
つまり、見た目ではなく「意味」でHTMLを書くのが重要です。
まとめ
タグは装飾用、見出しはhタグという役割の違いがあります。
今回のような人物紹介ページでも、構造を意識するとSEOと可読性が大きく向上します。
見た目はCSSで調整できるため、HTMLは意味ベースで書くのが理想です。
コメント