前回は、HTML5のまとめにつきまして記載いたしました。
HTML5でコーディングをおこなう際の、重要事項ならびに注意する点につきまして、考え方を記載いたしました。
要約いたしましと、構文エラーの無いようにマークアップ、コーディングをおこなうことが重要になってきます。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
それでは、記載前に多少ご説明を加えます。
まず、要素名はABC順にて記載いたします。今回はアルファベットのA～Iまでの要素を記載いたします。また・属性名と説明は必要のないことと思いますが、参照は今まで記載いたしました、HTML:stepページのリンクを記載いたします。実際のサンプルソースコードが知りたい場合は、リンクを参照いただければと思います。
それでは、結構なボリュームですが一覧にて記載いたします。
| 要素名 | 属性名 | 説明 | 参照 |
|---|---|---|---|
| a | リンク | ||
| href | リンク先のURL | ||
| hreflang | リンク先の言語 | ||
| type | リンク先のMIMEタイプ | ||
| rel | リンク先のファイルは何か | ||
| rev | リンク先のファイルから見てこのページは何か | ||
| target | リンク先の表示先 | ||
| download | ダウンロード用であることを示す | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| abbr | 略語 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| address | お問合せ先 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| area | イメージマップの領域 | ||
| alt | 代替テキスト | ||
| shape | 領域の形状（rect・circle・poly・default） | ||
| coords | 領域の座標 | ||
| href | 領域のリンク先URL | ||
| hreflang | リンク先の言語 | ||
| type | リンク先のMIMEタイプ | ||
| rel | リンク先のファイルは何か | ||
| target | リンク先の表示先 | ||
| download | ダウンロード用であることを示す | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| article | 独立・完結して居るセクション | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| aside | 本筋から外れているセクション | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| audio | 音声の再生 | ||
| src | 再生させる音声データのURL | ||
| controls | コントローラーを表示させる | ||
| autoplay | 自動的に再生を開始させる | ||
| loop | 繰り返し再生 | ||
| muted | 音量がゼロの状態にする | ||
| preload | プリロードに関する設定 | ||
| crossorigin | CORSの認証の設定 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| b | 実用上の目的で目立たせている部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| base | 相対パスの基準とするURLを設定 | ||
| href | リンク先のURL | ||
| target | リンク先の表示先 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| bdi | 双方向アルゴリズムから分離・独立させる部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| bdo | 文字表記の方向を設定してある部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| blockquote | 引用文（ブロックレベル） | ||
| cite | 引用元のURL | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| body | そのページの全コンテンツを入れる要素 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| br | 改行 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| button | ボタン | ||
| type | どの種類のボタンにするかをキーワードで指定 | ||
| name | データとセットになって送信される項目名 | ||
| disabled | ボタンを無効にする | ||
| value | ボタンの値 | ||
| menu | 表示させるメニューのid | ||
| autofocus | ロードされると同時にこの部分にフォーカスさせる | ||
| form | このボタンと関連付けるフォームのid | ||
| formaction | データの送信先のURL | ||
| formmethod | データを送信する際のHTTPメソッド | ||
| formenctype | データを送信する際のMIMEタイプ | ||
| formnovalidate | 送信時には妥当性チェックを行わない | ||
| formtarget | 送信結果の表示先 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| canvas | ボタン | ||
| width | 表示させる領域の幅 | ||
| height | 表示させる領域の高さ | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| caption | 表のキャプション | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| cite | 出典（作品名・作者名） | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| code | コンピュータのコード | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| col | 表の縦列 | ||
| span | この要素の対象となる縦列の数 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| colgroup | 表の縦列のグループ | ||
| span | グループ化する縦列の数 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| data | 機械可読形式のデータの付加 | ||
| value | 要素内容を機械可読形式にしたデータ | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| datalist | input要素用の選択肢 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| dd | dl要素内の説明の項目 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| del | 編集の過程で削除された部分 | ||
| cite | 削除についての説明のあるURL | ||
| datetime | 削除した日付 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| details | 詳細情報の表示・非表示を切り替えられる部分 | ||
| open | 詳細情報が表示されている状態にする | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| dfn | 定義対象の用語 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| div | 定義の意味を持たない要素・ブロックレベル | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| dl | 説明リスト全体 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| dt | dl要素内の用語の項目 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| em | 強調 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| embed | プラグインを使った読み込み | ||
| src | 組み込むデータのURL | ||
| type | 組み込むデータのMIMEタイプ | ||
| width | 表示させる領域の幅 | ||
| height | 表示させる領域の高さ | ||
| その他の属性 | その | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| fieldset | フォーム関連部品のグループ | ||
| name | フォームの送信時に使用されるこのグループの名前 | ||
| disabled | グループを無効にする | ||
| form | このグループと関連付けるフォームのid | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| figcaption | 図表のキャプション | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| footer | フッター | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| form | フォーム | ||
| action | データの送信先のURL | ||
| method | データを送信する際のHTTPメソッド | ||
| enctype | データを送信する際のMIMEタイプ | ||
| accept-charset | 受付可能な文字コード | ||
| name | フォームの名前 | ||
| novalidate | 送信時にデータの妥当性チェックを行わない | ||
| autocomplete | オートコンプリート機能のデフォルトの設定 | ||
| target | 送信結果の表示先 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| h1～h6 | 見出し | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| head | そのページの文書情報を入れる要素 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| header | ヘッダー | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| hr | 主題の変わり目 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| html | すべての要素を含む要素 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| i | 性質・状態が異なっている部分 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| iframe | インラインフレーム | ||
| src | インラインフレーム内に表示させる文書のURL | ||
| srcdoc | インラインフレーム内に表示させる文書のソースコード | ||
| name | target属性で表示先として指定する際の名前 | ||
| sandbox | セキュリティ上の制限を解除する項目を指定 | ||
| allowfullscreen | フルスクリーン表示にすることを許可する | ||
| width | インラインフレームの幅 | ||
| height | インラインフレームの高さ | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| img | 画像 | ||
| alt | 代替テキスト | ||
| src | 表示させる画像のURL | ||
| srcset | 環境に合わせた候補画像のURL | ||
| sizes | 条件ごとの表示幅 | ||
| width | 画像の幅（ピクセル数） | ||
| height | 画像の高さ（ピクセル数） | ||
| crossorigin | CORSの認証の設定 | ||
| usemap | クライアントサイド・イメージマップの名前 | ||
| ismap | サーバーサイド・イメージマップであることを示す | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| input | フォームの各種部品になる要素 | ||
| type | どの種類の部品にするのかをキーワードで指定 | ||
| name | データとセットになって送信される項目名 | ||
| value | 部品の値・ボタンのラベルとして表示 | ||
| disabled | 部品を無効にする | ||
| readonly | 部品を変更不可にする | ||
| size | 入力フィールドの幅を文字数で指定 | ||
| checked | 部品をチェックされた状態にする | ||
| minlength | 最低限入力しなければならない文字数 | ||
| maxlength | 入力可能な最大の文字数 | ||
| accept | 選択可能なファイルのMIMEタイプ | ||
| required | 入力や選択を必須にする | ||
| autofocus | ロードされると同時にこの部品にフォーカスさせる | ||
| placeholder | プレースホルダ― | ||
| autocomplete | オートコンプリートの設定 | ||
| list | サジェスト機能として使用するdatalist要素のid | ||
| pattern | 入力された値をチェックするための正規表現 | ||
| inputmode | 入力モード・全角ひらがななど | ||
| multiple | 複数の値の入力や選択を可能にする | ||
| min | 最小値 | ||
| max | 最大値 | ||
| step | 入力可能な値の間隔 | ||
| src | 送信ボタンとして表示させる画像のURL | ||
| alt | 送信ボタンとして表示させる画像の代替テキスト | ||
| width | 送信ボタンとして表示させる画像の幅 | ||
| height | 送信ボタンとして表示させる画像の高さ | ||
| dirname | 文字表記の方向を自動的に送信させる際の項目名 | ||
| form | この部品と関連付けるフォームのid | ||
| formaction | データ送信先のURL | ||
| formmethod | データを送信する際のHTTPメソッド | ||
| formenctype | データを送信する際のMIMEタイプ | ||
| formnovalidate | 送信時には妥当性チェックを行わない | ||
| formtarget | 送信結果の表示先 | ||
| グローバル属性 | id・class・title・lang・styleなど | ||
| ins | 編集の過程で追加された部分 | ||
| cite | 追加についての説明のあるURL | ||
| datetime | 追加した日付 | ||
| グローバル属性 | id・class・title・lang・styleなど |
という事で今回は、HTML5要素名をABC順にてアルファベットのA～Iまでの要素を記載いたしました。
A～Iまでだけでもコレだけの要素がございます。必然的に覚えるのは不可能ですね。
しかしながら、ひとつひとつにしっかりと意味合いがございますので、マークアップの際、適切な要素を指定することをおすすめします。
クローラーであるgooglebotは、しっかりと意味合いを理解していますので、このことを踏まえますと正しいマークアップをおこなうと、googlebotに優しいページとしてSEOにも有効なように思います。
という事で、次回はK～Wまでを一覧にて記載いたします。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
