段落を表す<p>（パラグラフ）タグ、段落単位での引用を表す<blockquote>タグの解説、写真や図表などのまとまりを表す<figure>タグ、図表や写真などにキャプションを付与する<figcaption>タグの使用方法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| p要素 |
|
0個、または複数のsource要素に続いて、１つのimg要素。オプションでスクリプト支援要素 （script要素及びtemplate要素） |
| blockquote要素 |
|
フローコンテンツ |
| figure要素 |
|
|
| figcaption要素 | なし |
フローコンテンツ |
グローバル属性（共通）
グローバル属性は、すべての要素に指定できる共通の属性のことです。
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
入力コントロールからデータを送信するときにスクリプトを実行します。
p要素
ブロックレベル要素
書式・概要
<p>～</p>p要素は文書の段落を表します。段落とは文書内でひとかたまりになっている文章のことで、通常は複数の文で構成されます。印刷媒体では前後に改行や空白行をいれることによって表現されています。
段落の先頭を１文字開けたい場合は、全角スペースを設置するか、CSS「text-indent: lem」を指定します。
使用方法
p要素は、その範囲がひとつの段落（paragraph）であることを表します。一般的なブラウザでは、この要素の前後にはほぼ１行分のスペース（マージン）がとられて表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>P要素 サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<p>蓮の花が咲くころには、故郷に帰郷する予定です。
まだ、昔通ったオムライスを提供する朝日食堂は残っているででしょうか
</p>
<p>
朝日食堂は、明治３０年ほどに創業しました。夫婦二人で立ち上げ、地域に愛される食堂になりました。
</p>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
blockquote要素
ブロックレベル要素
書式・概要
<blockquote 属性="属性値">引用文</blockquote>
<blockquote cite="引用元のURL">引用文</blockquote>blockquote要素は、テキストが長い引用文であることを示します。
文章を段落などのまとまった単位で（ブロックレベル要素として）引用する場合に使用されます。cite属性を使用すると、引用したページのURLを示すこともできます。この要素は、一般的なブラウザでは左右がインデントされた状態で表示されますので、かつては左右のマージンをとる目的だけで利用されることもありました。
しかし、それではその部分全体が引用された文章であることになってしまいますので、マージンを設定した場合にはスタイルシートを使うようにしてください。
使用方法
引用文エリアは、通常インデントされます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>blockquote要素サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<section>
<p>
たとえば、W3Cのアクセシビリティ・ガイドライン1.0の中には次のような一説があります
</p>
<blockquote cite="https://waic.jp/docs/WCAG20/Overview.html">
<p>ユーザーエージェントでは</p>
</blockquote>
</section>
<section>
<blockquote cite="urn:isbn:978-4041053324">
<p>黒蜥蜴 江戸川乱歩ベストセレクション (5)</p>
</blockquote>
</section>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
figure要素
書式・概要
<figure>～</figure>figure要素は、写真、挿絵、図表、コードなどのまとまりを表します。figure要素によるまとまりは、単体で独立したものでなければなりません。
要素内容としてはフローコンテンツであればなんでもいれることができるため、画像や表のほかソースコードを掲載したい場合などに利用できます。
figcaption要素
書式・概要
<figcaption>～</figcaption>figcaption要素は、figure要素であらわす図表にキャプション（見出しや説明文など）を付けるための要素です。<figure>～</figure>の範囲内の任意の位置に配置できます。
figure要素・figcaption要素の使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>figure要素サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<h1>京都の古都を探索</h1>
<figure>
<p>東寺の五重塔は天長3年（826年）に弘法大師空海が創建したと言われている。</p>
<img src="629959_s.jpg" alt="">
<figcaption>着物で京都の古都を歩く情景</figcaption>
</figure>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント