html5のタグの入れ子ルールを覚えよう

公開日：2019/09/08

ホームページを制作する上でコーディングは必ず行う業務になります。

また、コーディングができても文章構造的にタグの指定を間違えると表示上は問題ないですが、コーディングでは歪な文章になっている場合があります。

そういった場合でよくある間違いがタグの入れ子が間違っていることです。
「このタグの中にこのタグは入れてOKかなぁ」など、考える事が業務中にでてきたりします。恥ずかしながら、私もすべて覚えているわけではありません。

そういった時のために「忘れがちメモ」としてブログに記述しておきたいと思います。今回は、タグの意味や使用用途などの説明はせず、入れ子に関してまとめてみましたので、どのタグにどのタグを入れて良いのかを簡単に紹介します。

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

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タグ
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 , 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タグ
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タグ
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タグ
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 , 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