インライン要素とブロック要素に気をつけろ。

ついつい忘れがちですがHTMLにはインライン要素とブロック要素があります。そして

• ブロックレベル要素 ： ブロックレベル要素とインライン要素を含むことができる。
• インライン要素 ： コンテンツとインライン要素しか含むめない。

これはHTMLの設計がブロックレベル要素が「より大きな構造を構築する」という考え方だからです。

ざっくり言うと、セクショニング（構造をつくる）要素はブロック要素で、細かい修飾をする要素が、インライン要素と言えるかもしれません。

よく使うブロックレベル要素

` ` ：意外とどっちかなー？と思いつつブロックレベル。個人的にインライン寄り。 ` ` ` ` ` ` ` ` `

` ` ` `

`：全部構造を作る系のタグなので納得のブロックレベル。 `

` ：ブロックレベルの代表格。 `

` `
• ` ：これもリスト構造作るから。 `

  ` ：整形済みテキスト。これもインラインよりと思いつつブロックレベル要素。
  ` ` ：テーマの区切り。水平線。これもインラインより。
  よく使うインライン要素
  ` ` ：文章を修飾するのでインライン。
  ` ` ：文章を修飾するのでインライン。
  ` ` ：文章を修飾するのでインライン。
  ` ` ：文章を修飾するのでインライン。
  ` ` ：文章を修飾するのでインライン。
  ` ` ：作品のタイトルまたはURLを囲う。文章を修飾するのでインライン。
  ` ` ：引用情報を囲う。文章を修飾するのでインライン。
  ` ` ：長文の引用情報を囲う。文章を修飾するのでインライン。
  どっちか迷う要素たち
  ` ` ：テーブルという構造を作るから、ブロックライン。
  ` ` ：フォームという構造を作るから、ブロックライン。
  ` ` ：フォームの要素系はインライン。
  ` ` ：インライン。
  ` ` ：インライン。
  気をつけるべき要素たち
  ` ` ：インライン要素だがHTML5からはブロックレベル要素を含めることが可能に。
  参照
  MDN web docs | ブロックレベル要素
  MDN web docs | インライン要素
  MDN web docs | HTML要素リファレンス