h1〜h6要素とCSSでfont-sizeを変えることの違い。

Question

h1〜h6要素で文字の大きさを変えられますが、CSSでfont-sizeを設定することでも文字の大きさは変えられると思います。これらの文字の大きさの変え方には違いがあるのでしょうか。

Comments

[K_3578]

何が聞きたいのか知らないけどとりあえずMDN見たら？
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Heading_Elements

https://developer.mozilla.org/ja/docs/Web/CSS/font-size

[m.ts10806]

それぞれの役割について理解された上でしょうか。いずれにしても「要件次第」です。

Answer 1

セマンティクス（意味）が異なります。

<h1>これは見出し</h1>
<div style="font-size:xx-large">これは大きな文字が書かれただけのただの段落</div>

---

とはいえ、普通にページを読む分には違いはあまり気にならないでしょう。

一番大きな違いはアクセシビリティです。

多くのスクリーンリーダーでは、すべての見出しの一覧を取り出せます。それらの見出しを、特定のコンテンツを見つけるための手軽な目次のようにも使えます。

テキストコンテンツ | HTML: アクセシビリティの基礎 - ウェブ開発を学ぶ | MDN

また、SEO（サーチエンジン最適化）にも影響がある、と言われています。