HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの見出し（h1〜h6）とは？使い方とSEOにおける重要性を解説

HTMLの見出し（Heading）とは、<h1>から<h6>までの6つのレベルで構成される要素のことです。h1が最も重要度の高い見出しレベルであり、h6に向かうにつれて重要度が低くなります。つまり、H1・H2・H3・H4・H5・H6の6段階の見出しが用意されています。

ポイント： 見出しは、Googleなどの検索エンジンがウェブページのコンテンツをインデックス（登録）する際に重要な手がかりとして利用されます。そのため、適切な見出し構造はSEO対策の面でも非常に有効です。

見出しタグの役割

  • <h1>： ページ内で最も重要な大見出し。原則として1ページに1つ使用するのが推奨されます。
  • <h2>〜<h4>： 章や節など、コンテンツの階層構造を表す中見出し・小見出し。
  • <h5>〜<h6>： さらに細かい補足的な項目に使用します。

見出しは単に文字を大きく太字にするためではなく、文書の論理的な構造を示すために使うことが重要です。また、スクリーンリーダーを利用するユーザーにとってのアクセシビリティ向上にも役立ちます。

HTML見出しの使用例

それでは、HTML見出しの具体的なサンプルコードを見てみましょう。以下の例では、テキストを入力して見出しレベルを選択すると、その見出しのプレビューを確認できるインタラクティブなフォームを実装しています。

<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML Heading</legend>
<input type="text" id="textSelect" placeholder="Type Heading Here...">
<div id="radioBut">
<label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked>
<label>H2</label><input class="radio" type="radio" name="heading" value="h2">
<label>H3</label><input class="radio" type="radio" name="heading" value="h3">
<label>H4</label><input class="radio" type="radio" name="heading" value="h4">
<label>H5</label><input class="radio" type="radio" name="heading" value="h5">
<label>H6</label><input class="radio" type="radio" name="heading" value="h6">
</div>
<div>Heading Preview: <span id="headingPreview">Output will show up here</span></div>
<input type="button" onclick="changeHeading()" value="Preview">
</fieldset>
</form>
<script>
    var textSelect = document.getElementById("textSelect");
    var headingPreview = document.getElementById("headingPreview");
    function changeHeading() {
        if(textSelect.value === '')
            headingPreview.innerHTML = 'Write a Heading';
        else{
            for(var i=0; i<6; i++){
                var radInp = document.getElementsByClassName('radio')[i];
                if(radInp.checked === true && textSelect.value !== '')
                    headingPreview.innerHTML ='<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
            }
        }
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような動作になります。

1）テキストフィールドが空の状態で「Preview」ボタンをクリックする前

HTMLの見出し（h1〜h6）とは？使い方とSEOにおける重要性を解説

2）テキストフィールドが空の状態で「Preview」ボタンをクリックした後

何も入力されていない場合は「Write a Heading」というメッセージが表示されます。

HTMLの見出し（h1〜h6）とは？使い方とSEOにおける重要性を解説

3）テキスト入力後に「h6」を選択して「Preview」ボタンをクリックした場合

入力したテキストがh6レベルの最も小さな見出しとして表示されます。

HTMLの見出し（h1〜h6）とは？使い方とSEOにおける重要性を解説

4）テキスト入力後に「h1」を選択して「Preview」ボタンをクリックした場合

入力したテキストがh1レベルの最も大きな見出しとして表示されます。

HTMLの見出し（h1〜h6）とは？使い方とSEOにおける重要性を解説

まとめ

HTMLの見出しタグは、ページの構造を明確にし、検索エンジンにもユーザーにも内容を伝えるための重要な要素です。h1からh6までのレベルを正しく使い分け、読みやすく SEO に強い文書構造を作りましょう。

  1. HTML DOM ラジオボタンのvalueプロパティとは？取得・設定方法を解説

    HTML DOMのInput Radio valueプロパティは、type=radioが指定されたinput要素のvalue属性に関連するプロパティです。ラジオボタンのvalue属性の値を取得（get）または設定（set）するために使用されます。ラジオボタンのvalueプロパティは、その値が画面上に表示されないため、Webサイトのユーザーインターフェースには直接影響しません。しかし、フォームを送信する際に、同じグループ内の複数のラジオボタンを区別するために非常に役立ちます。構文valueプロパティを設定する場合の構文は以下の通りです。radioObject.value = text;ここで、t

  2. HTML DOM Input radio typeプロパティの使い方を徹底解説

    HTML DOMのInput radio typeプロパティは、type=radioが設定されたinput要素（ラジオボタン）に関連付けられたプロパティです。このプロパティは、ラジオボタン型のinput要素に対して常に文字列「radio」を返します。要素の種類をプログラムから確認したい場合に便利です。構文radio typeプロパティの基本構文は以下のとおりです。radioObject.typeサンプルコードここで、radio typeプロパティの具体的な使用例を見てみましょう。<!DOCTYPE html> <html> <body> <h1>