一般的な文書のセクションを表す<section>タグ、記事全体の範囲を示す<article>タグ、補足情報を表す（本文から外れた内容のセクション）<aside>タグ、主要なナビゲーション<nav>タグ、連絡先情報を表す<address>タグの使用方法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| カテゴリー | コンテンツモデル | |
| section要素 |
|
フローコンテンツ |
| article要素 | ||
| aside要素 | ||
| nav要素 | ||
| address要素 |
|
フローコンテンツ。ただし、子孫要素にヘッディングコンテンツ、セクショニングコンテンツ、header要素、footer要素、 address要素を含むことは不可。 |
属性
グローバル属性
グローバル属性は、すべての要素に指定できる共通の属性のことです。
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
入力コントロールからデータを送信するときにスクリプトを実行します。
section要素 概要・使用方法
<section>～</section>section要素は、文書内で一般的なセクション（章や節といったまとまり）を表しています。全体の中の一部分はセクション。これに対して、内容全体を含むセクションにはarticle要素を使用します。
HTML5ではセクションを表す要素が全部で4種類ありますが、用途の限定されている他の3種類に該当しないセクションに対しては、このsection要素を使用します。
<section>タグ内では新たに<h1>を使用することができます。
article要素 概要・使用方法
<article>～</article>article要素は、雑誌や新聞の記事、ブログの記事のような、その範囲内に内容の全体がはいっているようなセクションを表す場合使用します。１つの記事が複数に分かれている場合は、セクションを使用します。
section要素・article要素サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>section要素 サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<article>
<header>
<h1>海が見える町ガザン・クローナー近くの海難事故について投稿</h1>
<p><time datetime="2022-05-20T20:00:00+00:00">公開日：2022年05月20日</time></p>
</header>
<section>
<h1>漁師の証言①</h1>
<p>その日はいつになく嵐が来ていました。</p>
<footer>
<address>投稿者<a href="maitto:sunarin@example.com">すなりん記者</a></address>
</footer>
</section>
<section>
<h1>漁師の証言②</h1>
<p>視界が悪く、前方も２０～３０フィートくらいしか見えない状況で、突如ドスンという音がした。</p>
<footer>
<address>投稿者<a href="maitto:sunarin@example.com">すなりん記者</a></address>
</footer>
</section>
</article>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
aside要素 概要・使用方法
<aside> ～ </aside>aside要素は、メインコンテンツの本文ではない補足記事や広告のような部分に対して使用します。たとえば、広告・参考情報・補足記事・ブログの記事の横にある各種リンク・読者の興味をひくためのコンテンツの一部抜粋などに対して使用します。
複数の<nav>をグループ化するために使用することもできます。
aside要素のレイアウトイメージ
基本的な使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>aside要素 サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<header>ページヘッター</header>
<article>
<h1>上野動物園に行ってきました。</h1>
<p>丁度日よりもよく桜も咲いていたのでたくさんの人出がでていました。</p>
<aside> 広告 </aside>
</article>
<aside>
<ul>
<li><a href="entry1.html">関連リンク1</a></li>
<li><a href="entry2.html">関連リンク2</a></li>
</ul>
</aside>
<footer>ページフッター</footer>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
nav要素 概要・使用方法
<nav>～</nav>nav要素は、その部分が主要なメニュー（ナビゲーション）であることを示します。一般に、ホームページの中にはリンクのグループのようになっている部分が数か所ありますが、それらすべてに対して使用するのではなく、あくまで主要な（たとえばグローバルナビゲーションのような）ナビゲーションに対してのみ使用します。
ページ内容を音声で読み上げる場合あんどに、メニューを読み飛ばしたり、逆にメニューに戻ったりできるようにすることを意図して用意された要素です。
基本的な使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<header>
<h1>会社概要</h1>
<nav>
<ul>
<li><a href="/home">ホーム</a></li>
<li><a href="/product">製品</a></li>
<li><a href="/inquery">問い合わせ</a></li>
</ul>
</nav>
</header>
<article>記事本文</article>
<footer>
<ul>
<li><a href="/home">HOME</a></li>
<li><a href="/about">ABOUT</a></li>
</ul>
</footer>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
address要素 概要・使用方法
<address>～</address>address要素は、HTML文書または記事作者への連絡先・問い合わせを示します。body要素で定義した場合は、文書全体に対する連絡先情報となります。article要素の場合は各記事の個別の連絡先情報になります。また、address要素で住所を記載してはなりません。連絡先となるのは、メールアドレスやホームページの問い合わせフォームなどのリンクになります。
基本的な使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>address要素 サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<header>ページヘッダー</header>
<article>
<h1>記事のタイトル</h1>
<p>記事本文</p>
<address><!-- 記事に関する連絡先 -->
この記事に関する問い合わせ先：<a href="@mailto:sunarin@example.com">sunarin@example.com</a>
</address>
</article>
<footer>
<address><!-- 文書全体に関する連絡先 -->
サイトに関する問い合わせ先：<a href="@mailto:sunarin@example.com">sunarin@example.com</a>もしくは、<a href="/inquery">問い合わせフォーム</a>でメッセージを送信ください。
</address>
</footer>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント