ブロックとインライン

インライン要素

自分の幅分しかとらない。

• aタグ
• imgタグ

ブロックレベル要素

• pタグ

div要素

コンテンツ分割要素

| いろんな要素をグルーピングする。 |
|CSSでデザインするときに重宝する。|

span

divと同じく汎用的に使うが、インライン要素

文章内を赤文字にする場合、spanで特定の文字を囲み、cssで文字色を赤にする。
メディアとして使う（ボタンのようなみため）にする場合にも重宝している。

その他紹介

sup //上つき要素 数字や引用を使う時

sub //化学式を表現したいとき

セマンティックな要素

SEO対策になる

main要素

注意事項：検索、ナビ、ロゴなどはメインから除かないといけません。

nav要素

目次、サイドメニューなど

section要素

divよりも自立した要素を表す

article要素

文書、ページ、アプリケーション、サイトなどの中で自己完結しており、（集合したものの中で）個別に配信や再利用を行うことを意図した構成物を表します。

aside要素

サイドバーやコールアウトボックスなどを表現するためによく使われます。

header・footer要素

ナビ、ロゴを含んでいる

time要素

機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。

figure要素

figure は HTML の要素で、図表などの自己完結型のコンテンツを表し、任意で 要素を使用して表されるキャプションを付けることができます。図、すなわちキャプションとその中身は一単位として参照されます

<figure>
  <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>