こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
h要素っていつ使うの？
見出しをつけるために使うよ！
結論からいうと、h要素は見出しをつける時に使います。
今回はh1~h6要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。
スポンサーリンク
１： HTML5について
HTML5とは、HTMLバージョン5のことです。
過去HTMLは少しずつ改訂されていき、2014年にHTML5が発表されました。
みなさんが普段聞いてるHTMLはHTML5と同じ意味です。
ホームページを作るならHTML5といわれるほど、過去のHTML4と比べると格段に機能が多くなりました。
スマホ対応が簡単になったり、アニメーションが作れたりします。
つまりHTML5は、「今まで難しかった処理を簡単にしてくれた」ものというわけです。
２： h要素とは
h要素とは、各セクションの見出しをつけるための要素です。
h要素にはh1〜h6要素まであり、数字が大きくなるごとに見出しのレベルは下がっていきます。
1番見出しレベルが高いh1はタイトルに使われることが多く、1番大きい文字サイズで表示されます。
同一の要素であれば、同一レベルの見出しであると見なされます。HTML文書のアウトラインに影響を及ぼし、目次の項目も見出しのレベルによって階層を分けます。
h1〜h6要素は見た目上では文字サイズが変わるだけのように見えますが、プログラムでもclass属性をつけたり、パソコンが理解しやすくなったりと重要な要素となるため状況に応じて見出しレベルの使い分けをしましょう。
３： h要素の使い方
<body> <article> <h1> 記事の見出し </h1> <p> 記事の内容 </p> <h2> 記事の小見出し </h2> <p> 記事の内容 </p> </article>
</body>h要素はbody内で使用します。
h要素はコンテンツ区分要素です。文書のコンテンツを論理的な断片に体系づけます。
セクションを識別するためにアウトラインを作成して見出しをつけていきます。
ここではh1要素とh2要素を使用しました。
階層構造を二つに分けることによってユーザビリティの高いページを作成することができます。
h1要素には記事のタイトルをつけます。記事の上位部の方に大きく見出しが表示されるようになります。
h2要素にはページの各項目の小見出しをつけます。これによって項目ごとにページの詳細をユーザーに伝えれるようになります。
まとめ
今回はh要素についてと使い方について解説しました。
h要素は各セクションに見出しをつけることができる要素です。ユーザー目線からも開発者目線からも階層構造を作ることによってわかりやすくなるため状況に応じて使い分けができるようになりましょう。
これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。
以上、ユキでした！
スポンサーリンク
