前回は、HTML5.1全要素・属性一覧（A～Iまで）を一覧にて記載いたしました。
アルファベット順、頭文字A～Iまでだけでも結構なボリュームです...。
やはり、この一覧を見ながらでも、しっかりとマークアップしたHTMLと大雑多なマークアップをしたHTML、実は見た目はマークアップの仕方によって、ほぼ変わらないものと思いますが、googlebot君がソースコードを読むことななると話は別です。
なので極力しっかりとしたマークアップをおこなうことをおすすめします。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
それでは、前回に引き続き一覧にてHTML5の要素と属性を記載いたします。
| 要素名 | 属性名 | 説明 | 参照 |
|---|---|---|---|
| kdo | ユーザーが入力する文字 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| keygen | 公開key・秘密keyのペアを生成する部品 | ||
| challenge | チャレンジ・データ | ||
| keytype | 生成する暗号keyの種類 | ||
| name | データとセットになってい送信される項目名 | ||
| autofocus | ロードされると同時にこの部分にフォーカス | ||
| disabled | 部分を無効にする | ||
| form | この部品と関連付けるフォームのid | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| label | フォーム関連部分のラベル | ||
| for | 関連付ける部分のid | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| legend | fieldset要素のタイトル | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| li | リスト内の項目 | ||
| value | ol要素の子要素である場合のマーカーの番号 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| link | 関連ファイル | ||
| href | 関連ファイルのURL | ||
| hreflang | 関連ファイルの言語 | ||
| rel | 関連ファイルは何か | ||
| rev | 関連ファイルから見てこのページは何か | ||
| type | 関連ファイルのMIMEタイプ | ||
| media | メディアクリエ | ||
| sizes | アイコン画像の大きさ | ||
| crossorigin | CORSの認証の設定 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| main | メインコンテンツ | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| map | イメージマップの定義 | ||
| name | イメージマップの名前 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| mark | 注目してもらうために目立たせる部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| menu | コンテキストメニュー | ||
| type | メニューの種類 | ||
| label | 入れ子にして階層メニューにする時のラベル | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| menuitem | コンテキストメニューの項目 | ||
| type | 項目の種類 | ||
| label | 項目のラベル | ||
| icon | アイコンとして表示させる画像のURL | ||
| disabled | 項目を無効にする | ||
| checked | 項目をチェックされた状態にする | ||
| radiogroup | 連動して動作させる項目に共通して付ける名前 | ||
| default | 項目をデフォルトにする | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| meta | メタ情報 | ||
| name | メタ情報の名前 | ||
| content | メタ情報の値 | ||
| http-equiv | このページの状態または実行命令 | ||
| charset | このページの文字コード | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| meter | メーター | ||
| value | メーターの示す値 | ||
| min | メーターの示す範囲全体の下限 | ||
| max | メーターの示す範囲全体の上限 | ||
| low | 範囲を低・中・高に分割した場合の低の上限 | ||
| high | 範囲を低・中・高に分割した場合の高の下限 | ||
| optimum | 低・中・高のどれが最適何か示す値 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| nav | ナビゲーションのセクション | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| noscript | スクリプトが動作しない環境向けの内容 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| object | 様々な種類のデータの組み込み | ||
| data | 組み込むデータのURL | ||
| type | 組み込むデータのMIMEタイプ | ||
| typemustmatch | 指定したMIMEタイプと一致する場合のデータを使用 | ||
| name | target属性で表示先として指定する際の名前 | ||
| form | 組み込むデータと関連付けるform要素のid | ||
| width | 表示させる領域の幅 | ||
| height | 表示させる領域の高さ | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| ol | リスト全体：連番あり | ||
| type | グループのラベル | ||
| reversed | グループを無効にする | ||
| start | 連番の開始番号 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| optgroup | select要素の選択肢のグループ | ||
| label | グループのラベル | ||
| disabled | グループを無効にする | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| option | select要素・datalist要素の選択肢 | ||
| label | 選択肢のラベル | ||
| value | 送信される値 | ||
| selected | 選択肢からあらかじめ選択されている状態にする | ||
| disabled | 選択肢を無効にする | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| output | 計算結果を表示させる部品 | ||
| for | 計算のもとになった要素のid | ||
| name | データとセットになって送信される項目名 | ||
| form | この部品と関連付けるフォームのid | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| p | 段落 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| param | object要素のパラメーター | ||
| name | パラメーターの名前 | ||
| value | パラメーターの値 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| picture | 候補画像を入れる要素 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| pre | 整形済みテキスト | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| progress | プログレスバー | ||
| value | 処理の進み具合を示す現在地 | ||
| max | 処理の全体量を示す上限値 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| q | 引用文 | ||
| cite | 引用元のURL | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| rb | 漢字部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| rp | ルビに未対応の環境で使用するカッコ | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| rt | ふりがな部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| rtc | rt要素のグループ化 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| ruby | ルビ全体 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| s | 正しくない部分および関係のない部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| samp | コンピューターによる出力 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| script | スクリプト | ||
| src | 外部スクリプトのURL | ||
| type | スクリプトのMIMEタイプ | ||
| charset | 外部スクリプトの文字コード | ||
| defer | 非同期で読み込み、読み込み完了後すぐに実行 | ||
| async | 非同期で読み込み、ページ解析処理の後に実行 | ||
| crossorigin | CORSの認証の設定 | ||
| nonce | CSPのノンス | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| section | 一般的なセクション | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| select | 複数項目から選択する部分 | ||
| name | データとセットになって送信される項目名 | ||
| size | ユーザーに見える状態にする選択肢の数 | ||
| multiple | 複数の選択肢を選択可能にする | ||
| disbled | 部品を無効にする | ||
| required | 選択を必須にする | ||
| autofocus | ロードすると同時にこの部分にフォーカスさせる | ||
| form | この部品と関連付けるフォームのid | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| small | 副次的な注記 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| source | picture要素・asdio要素などの候補データ | ||
| src | 再生させる動画・音声データのURL | ||
| srcset | 環境に合わせた候補画像のURL | ||
| sizes | 条件ごとの表示幅 | ||
| media | メディアクリエで示す条件 | ||
| type | データのMIMEタイプ | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| span | 特定の意味を持たないインライン要素 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| strong | 重要な部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| style | スタイルシート | ||
| media | メディアクエリ | ||
| type | スタイルシート言語を表すMIMEタイプ | ||
| nonce | CSPのノンス | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| sub | 下付き文字 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| summary | 詳細情報の見出し | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| sup | 上付き文字 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| table | 表全体 | ||
| border | レイアウト用の表ではない事を明示する | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| tbody | 表の本体 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| td | 表のセル（データ） | ||
| colspan | セル何個分の幅を持たせるか | ||
| rowspan | セル何個分の高さを持たせるか | ||
| headers | このセルの見出しとなっているth要素をidで示す | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| template | 内容をスクリプトで挿入する範囲 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| textarea | 複数行の入力フィールド | ||
| cols | 入力フィールドの幅を文字数で指定 | ||
| rows | 入力フィールドの高さを文字数で指定 | ||
| name | データとセットになって送信される項目名 | ||
| disabled | 入力フィールドを無効にする | ||
| readonly | 入力フィールドを変更不可にする | ||
| wrap | 行を折り返している箇所に改行を加えるかどうか | ||
| requied | 入力を必須にする | ||
| autofocus | ロードされると同時にこの部分にフォーカスさせる | ||
| placeholder | プレースホルダ― | ||
| autocomplete | オートコンプリートの設定 | ||
| inputmode | 入力モード（全角ひらがななど） | ||
| minlength | 最低限入力しなければならない文字数 | ||
| maxlength | 入力可能な最大の文字数 | ||
| dirname | 文字表記の方向を自動的に送信させる際の項目名 | ||
| form | この入力フィールドと関連付けるフォームのid | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| tfoot | 表のフッタ― | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| th | 表のセル（見出し） | ||
| colspan | セル何個分の幅を持たせるか | ||
| rowspan | セル何個分の高さを持たせるか | ||
| headers | このセルの見出しとなっているth要素をidで示す | ||
| scope | 見出しの対象となっているデータセルの範囲 | ||
| abbr | 見出しを簡略化したもの | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| thead | 表のヘッダー | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| time | 機械可読可能な日時のデータ | ||
| datetime | 要素内容を機械可読形式にしたデータ | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| title | ページのタイトル | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| tr | 表の横一列 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| track | audio要素・video要素のテキスト・トラック | ||
| kind | テキスト・トラックの種類 | ||
| src | テキスト・トラックのURL | ||
| srclang | テキスト・トラックの言語の種類 | ||
| label | テキスト・トラックのタイトル | ||
| default | このトラックをデフォルトにすることを示す | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| u | テキスト以外の注釈の付いた部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| ul | リスト全体 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| var | 変数 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| video | 動画の再生 | ||
| src | 再生させる動画データのURL | ||
| controls | コントローラーを表示させる | ||
| sutoplay | 自動的に再生を開始させる | ||
| loop | 繰り返し再生させる | ||
| muted | 音量がゼロの状態にする | ||
| width | 動画の幅 | ||
| height | 動画の高さ | ||
| poster | 再生可能となるまでの間に表示させる画像のURL | ||
| preload | プリロードに関する設定 | ||
| crossorigin | CORSの認証の設定 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| wbr | 改行可能にする位置 | ||
| グローバル属性 | id・class・title・lang・styleなど |
という事で今回は、HTML5.1各要素をABC順にてアルファベットのK～Wまでの要素を記載いたしました。
やはり、かなりのボリュームですので要素（タグ）や属性をしっかりと覚える必要はなく、理解する必要がある事と思います。実際にコーディングやマークアップをおこなう際は、上記などを見ながら記載すると、適切に記載することが比較的簡単に出来ることと思います。
また、次回は補足といたしまして、各要素（タグ）の配置ルールを一覧にて記載しようと思います。コレもあると非常に便利ですね。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
