html5のタグの入れ子ルールを覚えよう
ホームページを制作する上でコーディングは必ず行う業務になります。
また、コーディングができても文章構造的にタグの指定を間違えると表示上は問題ないですが、コーディングでは歪な文章になっている場合があります。
そういった場合でよくある間違いがタグの入れ子が間違っていることです。
「このタグの中にこのタグは入れてOKかなぁ」など、考える事が業務中にでてきたりします。恥ずかしながら、私もすべて覚えているわけではありません。
そういった時のために「忘れがちメモ」としてブログに記述しておきたいと思います。今回は、タグの意味や使用用途などの説明はせず、入れ子に関してまとめてみましたので、どのタグにどのタグを入れて良いのかを簡単に紹介します。
- divタグに入れられるタグ
- h1〜h6タグに入れられるタグ
- pタグに入れられるタグ
- ul / ol / liタグに入れられるタグ
- spanタグに入れられるタグ
- strong / emタグに入れられるタグ
- table / tr / th / tdタグに入れられるタグ
- dl / dt / ddタグに入れられるタグ
- aタグに入れられるタグ
divタグに入れられるタグ
divタグは、ほぼすべてのタグを入れる事ができる
divタグ |
---|
a , article , aside , audio , b , blockquote , br , button , canvas , cite , code , div , dl , em , figure , footer , form , h1-h6 , header , hgroup , hr , i , iframe , img , input , label , main , nav , ol , p , picture , pre , script , section , select , small , span , strong , svg , table , template , textarea , time , ul , video |
h1〜h6タグに入れられるタグ
hタグ |
---|
a , audio , b , br , button , canvas , cite , code , data , em , i , iframe , img , input , label , picture , select , small , span , strong , svg , textarea , time , video |
pタグに入れられるタグ
pタグ |
---|
a , audio , b , br , button , canvas , cite , code , data , em , i , iframe , img , input , label , picture , select , small , span , strong , svg , textarea , time , video |
ul / ol / liタグに入れられるタグ
ul,olタグ |
---|
li , template , script |
liタグ |
a , article , aside , audio , b , blockquote , br , button , canvas , cite , code , div , dl , em , figure , footer , form , h1-h6 , header , hgroup , hr , i , iframe , img , input , label , main , nav , ol , p , picture , pre , script , section , select , small , span , strong , svg , table , template , textarea , time , ul , video |
spanタグに入れられるタグ
spanタグ |
---|
a , audio , b , br , button , canvas , cite , code , data , em , i , iframe , img , input , label , picture , select , small , span , strong , svg , textarea , time , video |
strong / emタグに入れられるタグ
strong,emタグ |
---|
a , audio , b , br , button , canvas , cite , code , data , em , i , iframe , img , input , label , picture , select , small , span , strong , svg , textarea , time , video |
table / tr / th / tdタグに入れられるタグ
tableタグ |
---|
tbody , thead , tfoot , caption , colgroup |
trタグ |
th , td |
th,tdタグ |
a , article , aside , audio , b , blockquote , br , button , canvas , cite , code , div , dl , em , figure , footer , form , h1-h6 , header , hgroup , hr , i , iframe , img , input , label , main , nav , ol , p , picture , pre , script , section , select , small , span , strong , svg , table , template , textarea , time , ul , video |
dl / dt / ddタグに入れられるタグ
dlタグ |
---|
dt , dd , div |
dt,ddタグ |
a , article , aside , audio , b , blockquote , br , button , canvas , cite , code , div , dl , em , figure , footer , form , h1-h6 , header , hgroup , hr , i , iframe , img , input , label , main , nav , ol , p , picture , pre , script , section , select , small , span , strong , svg , table , template , textarea , time , ul , video |
aタグに入れられるタグ
aタグは特殊なタグになり、親タグの要素を引き継ぐためaタグがどの親タグかによって入れれるタグがかわります。
例えば、divタグが親ならdivの入れ子ルールが適応され、spanタグが親ならspanの入れ子ルールが適応されるようになります。
親タグによって変化するため、aタグを使用するときはしっかりと親タグの入れ子ルールを確認して使用するようにしてください。