プログラミング・ITHTML

Blog Article

HTMLの見出しタグ h1-h6の使い方をわかりやすく解説

こんにちは、Mochiです。

HTMLの見出しってどんなふうに作るんだっけ?どんな注意点があるんだっけ?🤔
そのような方に向けて、HTMLの見出しタグ h1 - h6の基本的な使い方と注意点をわかりやすく解説します。

😇見出しタグの種類

見出しタグには<h1>, <h2>, <h3>, <h4>, <h5>, <h6>の6種類があります。このhは英語の見出しを意味する”heading”がもとになっています。頭(head)に出てくるものと認識すると覚えやすいかもしれません。

それぞれの違いは見出しの大きさです。以下のように、数字が大きくなるにつれて、見出しのサイズが小さくなっていきます。これによって、文に階層構造を作り上げることができます。

<h1>h1による見出し</h1>
<h2>h2による見出し</h2>
<h3>h3による見出し</h3>
<h4>h4による見出し</h4>
<h5>h5による見出し</h5>
<h6>h6による見出し</h6>

htmlの見出しタグの階層構造

✍️見出しタグの使い方

見出しタグは内容(タグの間)に文字を入れて使います。

<h1>Mochi Blogへようこそ</h1>


非常にシンプルですね。間に挟まれた文字が見出しの大きさに変化します。

見出しは内容を分けたいときや、それぞれの内容にタイトルをつけたいときに使います。また、h1はページタイトルとして使われることが多いです。

🚨見出しタグの注意点

見出しタグを使う際の注意として、基本的にh1は1ページに1回だけ使うのが良いです。2回以上使っても何か大きな問題が起こるわけではありません。ただ、Webページではこのルールが使われていることが多いので、覚えておくと良いでしょう。

また、h1-h6の番号は順序に従って使うと良いです。つまり、大きさがちょうど良いからといって急にh4を登場させたりするのは、あまりよくありません。h1の下にはh2。h2の下にはh3という風に使いましょう。

🎉まとめ

今回は見出しタグ h1-h6の種類や使い方、注意点を学びました。見出しがあると文章が一気に見やすくなります。HTMLを使っていく上でとても基本的で重要な内容なので、自身で使いながら身につけ、スキルアップしていきましょう。

HTMLの構造ってどんな感じだっけ?という方はこちらの記事を読むのがおすすめです。https://www.mochi-blog.blog/blog/html-structure

参考になれば幸いです。
読んでいただきありがとうございました!

🤗おすすめ

本で体系的にHTMLについて学びたいという方にはこちらの本をおすすめします。HTMLの基礎から実際のWebサイト作成まで書かれており、豊富な図が含まれているため、多くの方が理解しやすい本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

YouTubeのように動画でサクサク学びたいという方には、Udmeyの講座をおすすめします。私もよく使うのですが書籍に比べ実用的な内容を学びやすく、隙間時間に見れるのがいいです。ぜひ気になるHTMLやWeb開発の人気オンラインコースを受講してみてください。

Udemy 人気のオンラインコース ウェブ開発

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容