前回は、HTML5.1全要素・属性一覧（K～Wまで）を一覧にて記載いたしました。
そこで、要素と属性を記載していて思ったわけです、ルールを記載していない。このルール、ご説明するまでもありませんが重要で、例えば、head要素はhtml要素の1つ目の子要素とかという決まり（ルール）がございます。これ仮に間違って2番目に記載したとしても、実はブラウザ上でエラーとかは表示されない訳です。
この事柄がHTMLでソースコードを記載する際、見た目は変わらないけれど構文チェックをおこなうとエラーになる要素です。 なので、またまた一覧にて記載いたしますので、マークアップの参考になれば幸いです。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
それでは、少しご説明をいたします。要素名（htmlタグ）をa ～ wの順に記載していきます。配置できる場所は、コンテンツ内であったりインライン要素であったりの説明になります。
内容として入れられる要素につきましては、文章内だったり空要素だったりの記載になります。
コーディングになれている方であれば、特に問題ないことが多いことと思いますが、私でもまれに複雑なマークアップの際は迷うこともありますので、その際にご参考になれば幸いです。
| 要素名 | 配置できる場所 | 内容として入れられる要素 |
|---|---|---|
| a | 文章内コンテンツが配置可能な場所 | 親要素と同じ。ただし、対話型コンテンツとa要素の内部に含むことができない |
| abbr | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| address | フローコンテンツが配置可能な場所 | フローコンテンツ。ただし、見出しコンテンツ・セクショニングコンテンツ・header要素・footer要素・address要素は内部に含むことができない |
| area | map要素またはtemplate要素の内部で、文章内コンテンツが配置可能な場所 | なし（空要素） |
| article | フローコンテンツが配置可能な場所 | フローコンテンツ |
| aside | フローコンテンツが配置可能な場所 | フローコンテンツ。ただし、main要素を内部に含むことはできない |
| audio | 組み込みコンテンツが配置可能な場所 | src属性が指定されている場合は先頭にtrack要素をゼロ個以上、その後は親要素と同じ。ただし、video要素とaudio要素は内部に含むことができない。src属性が指定されていない場合は、先頭にsource要素をゼロ個以上、次にtrack要素をゼロ個以上、その後は親要素と同じ。video要素とaudio要素は内部に含むことができない。 |
| b | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| base | head要素内：複数は配置できない | なし（空要素） |
| bdi | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| bdo | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| blockquote | フローコンテンツが配置可能な場所 | フローコンテンツ |
| body | html要素の2つ目の子要素として配置 | フローコンテンツ |
| br | 文章内コンテンツが配置可能な場所 | なし（空要素） |
| button | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ。table要素を内部に含むことはできない |
| canvas | 組み込みコンテンツが配置可能な場所 | 親要素と同じ |
| caption | table要素の最初の子要素として配置 | フローコンテンツ。table要素の内部に含むことはできない |
| cite | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| code | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| col | span属性のないcolgroup要素の子要素として配置 | なし（空要素） |
| colgroup | table要素の子要素として、caption要素よりも後ろで、tr要素・thead要素・tbody要素・tfoot要素よりも前の位置に配置 | span属性が指定されている場合：なし span属性が指定されていない場合：col要素・template要素をゼロ個以上 |
| data | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| datalist | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ、またはoption要素・script要素・template要素をゼロ個以上 |
| dd | dl要素内で、dt要素またはdd要素の後ろに配置 | フローコンテンツ |
| del | 文章内コンテンツが配置可能な場所 | 親要素と同じ |
| details | フローコンテンツが配置可能な場所 | summary要素を1つ配置し、その後はフローコンテンツ |
| dfn | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ。別のdfn要素を内部に含むことはできない |
| div | フローコンテンツが配置可能な場所 | フローコンテンツ |
| dl | フローコンテンツが配置可能な場所 | 1つ以上のdt要素に続く1つ以上のdd要素のグループをゼロ個以上 |
| dt | フローコンテンツが配置可能な場所 | フローコンテンツ。セクショニングコンテンツ・見出しコンテンツ・header要素を内部に含むことはできない |
| em | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| embed | 組み込みコンテンツが配置可能な場所 | なし（空要素） |
| fieldset | フローコンテンツが配置可能な場所 | 必要に応じてlegend要素を1つ配置し、その後はフローコンテンツ |
| figcaption | figure要素の内部に配置 | フローコンテンツ |
| figure | フローコンテンツが配置可能な場所 | フローコンテンツ。必要に応じて子要素としてfigcaption要素を1つだけ含むことが可能 |
| footer | フローコンテンツが配置可能な場所 | フローコンテンツ。footer要素内のセクショニングコンテンツに含まれていないheader要素とfooter要素、およびmain要素は内部に含むことができない |
| from | フローコンテンツが配置可能な場所 | フローコンテンツ。別のfrom要素内部に含むことはできない |
| h1～h6 | フローコンテンツが配置可能な場所 | 文章内コンテンツ |
| head | html要素の1つ目の子要素として配置 | iframe要素のsrcdoc属性による文書の場合、または上位レベルのプロトコルによってtitle要素と同等の情報が得られる場合：文書情報コンテンツの要素をゼロ個以上。その他の場合：1つのtitle要素を含む文書情報コンテンツを1つ以上 |
| header | フローコンテンツが配置可能な場所 | フローコンテンツ。header要素内のセクショニングコンテンツに含まれていないheader要素とfooter要素、およびmain要素は内部に含むことができない |
| hr | フローコンテンツが配置可能な場所 | なし（空要素） |
| html | 文書ルート要素として配置。インラインフレームのように別の文書の一部として配置される場合は、それを組み込んだ要素が配置可能な場所 | 最初にhead要素を1つ配置し、その後にbody要素を1つ配置 |
| i | フローコンテンツが配置可能な場所 | 文章内コンテンツ |
| iframe | 組み込みコンテンツが配置可能な場所 | テキスト |
| img | 組み込みコンテンツが配置可能な場所 | なし（空要素） |
| input | 文章内コンテンツが配置可能な場所 | なし（空要素） |
| ins | 文章内コンテンツが配置可能な場所 | 親要素と同じ |
| kbd | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| keygen | 文章内コンテンツが配置可能な場所 | なし（空要素） |
| label | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ。別のlabel要素、およびラベルの対象ではないinput要素・textarea要素・button要素・select要素・output要素・meter要素・progress要素・keygen要素は内部に含むことができない |
| legend | fieidset要素の最初の子要素として配置 | 文章内コンテンツ |
| li | ul要素またはol要素の内部 | フローコンテンツ |
| link | 文章情報コンテンツが配置可能な場所、head要素の子要素であるnoscript要素の内部 | なし（空要素） |
| main | フローコンテンツが配置可能な場所。article要素・asaide要素・nav要素・header要素・footer要素内部には配置できない | フローコンテンツ |
| map | 文章内コンテンツが配置可能な場所 | 親要素と同じ |
| mark | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| menu | フローコンテンツが配置可能な場所。menu要素の子要素として配置 | 順不同で、menuitem要素・menu要素・hr要素・script要素をそれぞれゼロ個以上 |
| menuitem | menu要素の子要素として配置 | なし（空要素） |
| meta | charset属性が指定されている場合またはhttp-equiv属性で文字コードを指定している場合：head要素内。http-equiv属性で文字コード以外の指定をしている場合：head要素の子要素であるnoscript要素内。name属性が指定されている場合：文書情報コンテンツが配置可能な場所 | なし（空要素） |
| meter | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ。別のmeter要素を内部に含むことはできない |
| nav | フローコンテンツが配置可能な場所 | フローコンテンツ。main要素の内部に含むことはできない |
| noscript | head要素内。noscript要素の内部に配置できない。文章内コンテンツが配置可能な場所。noscript要素の内部には配置できない | head要素の内部にあってスクリプトが無効な場合：順不同でlink要素・style要素・meta要素をそれぞれゼロ個以上。head要素の外部にあってスクリプトが無効の場合：親要素と同じ。別のnoscript要素を含むことはできない。それ以外の場合：テキスト |
| object | 組み込みコンテンツが配置可能な場所 | param要素をゼロ個以上、その後は親要素と同じ |
| ol | フローコンテンツが配置可能な場所 | li要素・script要素・template要素をゼロ個以上 |
| optgroup | select要素の子要素として配置 | option要素・script要素・template要素をゼロ個以上 |
| option | select要素・datalist要素・optgroup要素の子要素として配置 | label属性とvalue属性の両方が指定されている場合：なし。label属性がしていされていてvalue属性が指定されていない場合：テキスト。label属性が指定されていない場合：テキスト |
| outpt | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| p | フローコンテンツが配置可能な場所 | 文章内コンテンツ |
| param | object要素の子要素として、他のフローコンテンツよりも前に配置 | なし（空要素） |
| picture | 組み込みコンテンツが配置可能な場所 | source要素をゼロ個以上配置し、最後にimg要素を1つ配置 |
| pre | フローコンテンツが配置可能な場所 | 文章内コンテンツ |
| progress | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ。別のprogress要素を内部に含むことはできない |
| q | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| rb | ruby要素の子要素として配置 | 文章内コンテンツ |
| rp | ruby要素またはrtc要素の子要素として、rt要素またはrtc要素の直前か直後に配置。rt要素とrt要素の間には配置できない | 文章内コンテンツ |
| rt | ruby要素またはrtc要素の子要素として配置 | 文章内コンテンツ |
| rtc | ruby要素の子要素として配置 | 文章内コンテンツ、rt要素、rp要素 |
| ruby | 文章内コンテンツが配置可能な場所 | 1.2のパターン1つ以上：1.最初に文章内コンテンツまたはrb要素を1つ以上配置。2.次にrt要素またはrtc要素を1つ以上配置 |
| s | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| samp | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| script | 文章情報コンテンツおよび文章内コンテンツが配置可能な場所、script要素・template要素が配置可能な場所 | src属性が指定されていない場合：type属性の値によって異なる。src属性が指定されている場合：空、またはコメントによるスクリプトの説明 |
| section | フローコンテンツが配置可能な場所 | フローコンテンツ |
| select | 文章内コンテンツが配置可能な場所 | option要素・optgroup要素・script要素・template要素をゼロ個以上 |
| small | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| source | picture要素の子要素として、img要素よりも前に配置、video要素またはaudio要素の子要素として、他のフローコンテンツおよびtrack要素よりも前に配置 | なし（空要素） |
| span | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| strong | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| style | 文章内コンテンツが配置可能な場所、head要素の子要素であるnoscript要素内 | type属性の値によって異なる |
| sub | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| summary | details要素の最初の子要素として配置 | 文章内コンテンツ、またはh1～h6要素のいずれか1つ |
| sup | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| table | フローコンテンツが配置可能な場所 | caption要素を0～1個、colgroup要素を0個以上またはtr要素を1個以上、tfoot要素を0～1個。必要に応じてscript要素とtemplate要素を混入させることも可能 |
| tbody | table要素の子要素として、caption要素・colgroup要素・thead要素よりも後に配置 | tr要素・script要素・template要素をゼロ個以上 |
| td | tr要素の子要素として配置 | フローコンテンツ |
| template | 文書情報コンテンツが配置可能な場所、文章内コンテンツが配置可能な場所、script要素・template要素が配置可能な場所、span属性のないcolgroup要素の子要素として配置 | フローコンテンツまたは文書情報コンテンツ、または次の要素の内容として入れられる要素と同じ。ul・ol・dl・ryby・video・audio・object・select・fieldest・table・tr・thead・tbody・tfoot・colgroup・figure・details・menu |
| textarea | 文章内コンテンツが配置可能な場所 | テキスト |
| tfoot | table要素の子要素として、caption要素・colgroup要素・thead要素・tbody要素・tr要素よりも後に配置また、table要素の子要素として配置できる数は1つまで | tr要素・script要素・template要素をゼロ個以上 |
| th | tr要素の子要素として配置 | フローコンテンツ。ただし、セクショニングコンテンツ・見出しコンテンツ・header要素・footer要素を内部に含むことはできない |
| thead | table要素の子要素として、caption要素・colgroup要素よりも後でtbody要素・tfoot要素・tr要素よりも前に位置に配置 | tr要素・script要素・template要素をゼロ個以上 |
| time | 文章内コンテンツが配置可能な場所 | datetime属性が指定されている場合：文章内コンテンツ。datetime属性が指定されていない場合：仕様書で定められた書式のテキスト |
| title | head要素内で複数の配置は出来ない | テキスト |
| tr | table要素の子要素として、caption要素・colgroup要素・thead要素よりも後に配置、ただし、table要素の子要素となっているtbody要素がある場合は配置できない。thead要素・tbody要素・tfoot要素の子要素として配置 | td要素・th要素・script要素・template要素をゼロ個以上 |
| track | video要素またはaudio要素の子要素として、他のフローコンテンツよりも前に配置 | なし（空要素） |
| u | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| ul | フローコンテンツが配置可能な場所 | li要素・script要素・template要素をゼロ個以上 |
| var | 文章内コンテンツが配置可能な場所 | 文章内コンテンツ |
| video | 組み込みコンテンツが配置可能な場所 | src属性が指定されている場合：先頭にtrack要素をゼロ個以上、その後は親要素と同じ。ただし、video要素とaudio要素は内部に含むことができない。src属性が指定されていない場合：先頭にsource要素をゼロ個以上、次にtrack要素をゼロ個以上、その後は親要素と同じ。ただし、video要素とaudio要素は内部に含むことができない。 |
| wbr | 文章内コンテンツが配置可能な場所 | なし（空要素） |
という事で今回は、HTML5.1要素の配置ルール一覧にておおよそ記載いたしました。
シンプルなページの際は、マークアップ自体も特に問題ないことと思いますが、レスポンシブでコーディングをおこなうことが多くなってきた昨今、複雑なページのマークアップになりますと、私としても迷うことが多々ございますので、初心者の方であればなおさらですね。
そんな時は、ぜひ上記をご参考に構文エラーのないマークアップを心がけることをおすすめします。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
