HTMLの見出しタグ「h1」の使い方！「h1」～「h6」を正しく記述する事が大事

見出しタグ「h1」の使い方

「h」タグは見出しタグと言われています。見出しとは「標題」や「タイトル」という意味です。

ここで「タイトル」と言ってしまうと「title」タグとごっちゃになってしまうかも知れませんが、似て非なるものです。「title」タグはページのタイトル・名称を記述し、見出しタグはページに記述する項目のタイトルを記述します。

とは言え、「title」タグと「h1」タグに関してはほぼほぼ同じ内容になります。っていうか合わせた方が良いです。

それは「title」タグと「h」タグがブラウザの検索にヒットするために重要なタグだからです。

ホームページは一般のユーザーが見るだけではなく、「クローラー」と呼ばれるプログラムも見ています。クローラーは「検索ロボット」など色んな呼び名がありますが、人間とは違った視点でホームページを見ています。

クローラーが見ているのは記述したHTMLタグなので、このクローラーに正確な情報を提供するために正しいタグでの記述が必要になってくる訳です。そうする事によってあなたのホームページも検索に引っかかるようになります。

「h」タグが大事というお話をしたところで、このページの「h」タグを例に見ていきましょう。

            

                
<h1>HTMLの見出しタグ「h1」の使い方！「h1」～「h6」を正しく記述する事が大事</h1>
            
        

            

                
<h2>見出しタグ「h1」の使い方</h2>
            
        

あっ、「h2」までしかないですね（笑）。見出しタグは「h1」～「h6」までありますが僕は「h6」を使ったことがないです。

見出しタグは「h1」→「h2」→「h3」→「h4」→「h5」→「h6」の順で記述します。例えば「h1」の次に「h3」はダメ、「h2」の次に「h1」もダメとなります。

このページで言うと、「h1」はメインタイトルの【HTMLの見出しタグ「h1」の使い方！「h1」～「h6」を正しく記述する事が大事】で、「h2」は「h1」の中にある項目でそのタイトルを【見出しタグ「h1」の使い方】としています。

もし【見出しタグ「h1」の使い方】の中にさらに項目を作ってタイトルを付けるなら「h3」を使います。このように細分化したページの見出しを「h」タグによって明確にしていきます。

人間ならブラウザを見れば確認できるかも知れないですが、クローラーはこういうHTMLタグのルールに従ってホームページを認識していきます。

            

                
<title>HTMLの見出しタグ「h1」の使い方！「h1」～「h6」を正しく記述する事が大事 | チェピレア</title>
            
        

ちなみにこのページの「title」タグは上記です。先ほど「title」タグと「h1」タグはほぼ同じと言ってましたが、チェピレアの場合は「h1」にサイト名を付けたのが「title」タグです。

そのページにおいて一番言いたい事を「h1」で記述する。

よくあるのがサイト名やロゴを「h1」で記述しているパターンです。チェピレアでは「トップページ」だけ「Chepirare」を「h1」で記述しています。あとはそれぞれのページ名を「h1」で記述しています。

すべてのページで同じ内容を「h1」にするのは避けた方が良い。じゃないとページタイトルが「h2」から始まる事になるんですが、見出しタグの重要度は「h1」が一番高いです。

あとサイトのロゴなど「h1」に画像を使用するのであれば、「img」タグに「alt属性」も記述するようにしましょう。「alt」というのは代替テキストの事で画像の名称や簡単な説明を記述する事ができます。

「h」タグはかなり重要なタグなので正しい使い方を押さえときたいトコですね。他のタグは後回しで良いです（笑）。