HTML辞典 h1~h6要素、header要素、footer要素、main要素の解説

HTML辞典 HTML辞典
この記事は約10分で読めます。

セクションの見出しを表す<h1>~<h6>タグ、ヘッダーの範囲を示す<header>タグ、メインコンテンツの範囲を示す<main>タグ、フッターの範囲を示す<footer>タグ

HTML5

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

カテゴリー コンテンツモデル
h1~h6要素
  • フローコンテンツ
  • ヘッディングコンテンツ
  • パルパブルコンテンツ
フレージングコンテンツ
header要素
  • フローコンテンツ
  • パルパブルコンテンツ
    フローコンテンツ。ただし、header要素、footer要素を子要素に持つことはできない。
    footer要素
    main要素 フローコンテンツ

    各要素共通の属性

    グローバル属性

    グローバル属性は、すべての要素に指定できる共通の属性のことです。

    accesskey(アクセスキー)

    要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

    autocapitallze

    入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

    内容
    offまたはnone自動的な大文字化は指定しない
    onまたはsentences最初の文字を大文字化する
    words各語の最初の文字を大文字化する
    charactersすべての文字を大文字化する

    class(クラス)

    要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

    contenteditable(コンテント・エディタブル)

    要素の内容が閲覧者による編集可能かどうか指定します。

    内容
    trueまたは、空閲覧者による編集可能。
    false閲覧者による編集不可。

    data-

    カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

    dir(ディレクショナリティ)

    要素の内容の書字方向(文字を書き進める方向)を指定します。

    内容
    ltrテキストを左から右へ書き進める。「Left to Righ」の略
    rtl要素は編集不可。「Right to Left」の略
    autoユーザーエージェントによって自動的に書字方向を決める

    draggable

    Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

    内容
    テキストを左から右へ書き進める。「Left to Righ」の略
    autoユーザーエージェントによって自動的に書字方向を決める

    hidden(ヒドゥン)

    要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

    id(アイディー)

    要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

    空白文字は使用できません。

    lang(ランゲージ)

    要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

    例:lang=”ja”

    spellcheck(スペルチェック)

    要素の内容に対するスペルチェックの可否を指定します。

    trueスペルチェックをします。
    falseスペルチェックをしません。

    style(スタイル)

    要素に直接スタイルシートを指定します。

    ※style属性でスタイルを指定する方法はあまり推奨されていません。

    tabindex(タブインデックス)

    「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

    title(タイトル)

    要素に補足情報を加えます

    translate(トランスレート)

    翻訳対象にするかどうかを指定します。

    内容
    yes翻訳対象とする
    no翻訳非対象とする

    イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

    onclick

    要素をクリックしたときにスクリプトを実行します。

    oninput

    入力コントロールにデータを入力したときにスクリプトを実行します。

    onsubmit

    入力コントロールからデータを送信するときにスクリプトを実行します。

    h1~h6要素

    ブロックレベル要素

    <h1>~</h1> <!-- レベル高い -->
    <h2>~</h2>
    <h3>~</h3>
    <h4>~</h4>
    <h5>~</h5>
    <h6>~</h6> <!-- レベル低い -->

    h1~h6の各要素は、セクションの見出しを表します。要素名の数字は見出しのレベルを表します、h1は最も高いレベルで、h2、h3・・・と順番にレベルを定義していきます。文書内に同じ数字があれば同一のレベルと見なします。

    明示的にセクションを表すには、<section>、<article>、<aside>、<nav>といったセクショニングコンテンツの中で使用し、そのセクションの見出しを表すことができます。また、<section>の中に記述しなくても<h1>~<h6>の見出しを使用すると暗黙のアウトラインが開始されます。

    表示される大きさで見出しを選ぶのではなく、文書構造の実際の階層にあわせて選択する必要があります。

    すなりん
    すなりん

    HTML5で導入されたセクションとは、書籍における「章」や「節」のようなものです。

    先頭に見出しがあり、その見出しによる主題の及ぶ範囲にあるコンテンツ全体をセクションといいます。

    そのためセクションと見出しはセットで使用されます。

    HTML5の7種類のカテゴリーのうち、「セクショニングコンテンツ」に該当する4つの要素(article要素、section要素、aside要素、nav要素)がセクションを表す要素です。

    すなりん
    すなりん

    セクショニングルート

    要素内部に見出しやセクションがある場合には、外部とは切り離して扱う必要のある要素をセクショニングルートといいます。(引用してきた文章に見出しが含まれているなど)HTML5では、body要素もこのセクショニングルートの1つとして定義されており、body要素内の先頭に配置した見出しは、body要素の見出しであると認識します。

    基本的な使用方法

    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <title>h1要素~h6要素 サンプルページ</title>
        <meta charset="uft-8">
      </head>
      <body>
          <h1>見出しサンプル h1要素</h1>
          <h2>見出しサンプル h2要素</h2>
          <h3>見出しサンプル h3要素</h3>
          <h4>見出しサンプル h4要素</h4>
          <h5>見出しサンプル h5要素</h5>
          <h6>見出しサンプル h6要素</h6>
          <section>
          </section>
      </body>
    </html>

    実行サンプル

    chrome実行サンプル

    基本的な使用方法サンプル h1h6要素 chrome実行サンプル

    Firefox実行サンプル

    基本的な使用方法サンプル h1h6要素 firefox実行サンプル

    edge 実行サンプル

    基本的な使用方法サンプル h1h6要素 edge実行サンプル

    opera 実行サンプル

    基本的な使用方法サンプル h1h6要素 opera実行サンプル

    header要素

    <header>~</header>

    header要素は、セクションのヘッダー情報を示します。そのセクションの概要や目次、サイトメニュー、ナビゲーションリンク、Webサイトロゴ、検索フォームなど関連する内容を記述します。<header>の中には、ほとんどの場合<h1>~<h6>のタグを含みますが必須ではありません。

    main要素

    <main>~</main>

    main要素はbody要素内に配置します。その部分が主要のコンテンツであることを示します。main要素はHTML文書中に1つだけしか配置はできません。また、articie要素、aside要素、footer要素、header要素、nav要素では使用することはできません。

    セクショニングコンテンツではないので、文書のアウトラインには影響を与えません。

    footer要素

    <footer>~</footer>

    footer要素は著者情報や関連リンクなどを記述します。article要素、aside要素、nav要素、section要素などの直近のセクションに関するフッター情報を示します。

    footer要素はかならずしも最後に配置する必要はありません。

    header要素・main要素・footer要素のサンプル

    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <title>header要素、main要素、footer要素サンプルページ</title>
        <meta charset="uft-8">
      </head>
      <body>
          <header>
              <h1>会社概要</h1>
              <nav>
                  <ul>
                      <li><a href="https://kcfran.com/home/">ホーム</a></li>
                      <li><a href="https://kcfran.com/product/">製品</a></li>
                      <li><a href="https://kcfran.com/inquery/">問い合わせ</a></li>
                  </ul>
              </nav>
          </header>
          <main role="main">
               <article>
                   <h1>HTML5に関する技術情報</h1>
                   <p>main要素は、HTML文書ないで1つしかもてません。</p>
               </article>
          </main>
          <footer>
               <address>
                   このサイトに関するお問い合わせ
                   <a href="https://kcfran.com/inquiry/">すなりんの問い合わせ</a>
               </address>
               <p><small>© Copyright 2021 すなりん All Rights Reserved.</small></p>
          </footer>
      </body>
    </html>

    実行サンプル

    chrome実行サンプル

    基本的な使用方法サンプル header要素、main要素、footer要素 chrome実行サンプル

    Firefox実行サンプル

    基本的な使用方法サンプル header要素、main要素、footer要素 firefox実行サンプル

    edge 実行サンプル

    基本的な使用方法サンプル header要素、main要素、footer要素 edge実行サンプル

    opera 実行サンプル

    基本的な使用方法サンプル header要素、main要素、footer要素 oepra実行サンプル

    コメント

    タイトルとURLをコピーしました