セクションの見出しを表す<h1>～<h6>タグ、ヘッダーの範囲を示す<header>タグ、メインコンテンツの範囲を示す<main>タグ、フッターの範囲を示す<footer>タグ
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| カテゴリー | コンテンツモデル | |
| 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要素もこのセクショニングルートの１つとして定義されており、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実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
header要素
<header>～</header>header要素は、セクションのヘッダー情報を示します。そのセクションの概要や目次、サイトメニュー、ナビゲーションリンク、Webサイトロゴ、検索フォームなど関連する内容を記述します。<header>の中には、ほとんどの場合<h1>～<h6>のタグを含みますが必須ではありません。
main要素
<main>～</main>main要素はbody要素内に配置します。その部分が主要のコンテンツであることを示します。main要素はHTML文書中に１つだけしか配置はできません。また、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文書ないで１つしかもてません。</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実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント