BETA

セマンティック、ああセマンティック

投稿日:2019-11-08
最終更新:2019-11-09

HTML5でセマンティックなタグがたくさん増えた。
今日はそれらのタグでよく使いそうなものを改めて学んだ。

セマンティックとは?

セマンティックとは、一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。

要は「意味を持つこと」である。
例えば、div要素はなんの意味も持たないが、h1要素なんか「このページの一番重要な見出し」という意味を持っている。
そんななんらかの意味を持っていることを「セマンティック」と言う。

HTML5で増えた新参者たち

section要素

  • ブロックひとまとまりをsectionで明示できる。
  • sectionは入れ子にすることができる。
  • sectionには必ず見出しが必要で、一つが好ましい。

見出しレベルについて調べてみた
上の記事なんかではsectionに見出しタグを入れるとレベルが変わるとかどうとか言っているが、正直よく分からない。
気にするべからず。

サイト全体をヘッター、メイン、フッターで分けられる。

article、aside、nav要素

  • articleはそれ単体で完結するものを表す。ブログ記事やニュース記事など。ブログのトップページに複数ある場合もある。
  • asideは補助的な内容を表す。ブログでいうと、サイドバー全体に当たる。
  • navはナビゲーション部分。ヘッダーだけじゃなくて、本文やフッターにも書いていい。

使い分けについて

こんな感じ↓

上の画像の分け方も一例だけど、他の分け方も考えてみると

  • headerの中にnavを含める(グローバルナビはヘッダーの一部として考える)。
  • articleとasideをmainで囲んで、header、main、footerという3構造にする。

こんな感じの分け方もありかもしれない。

セマンティック症候群にならないように

完璧に使い分けようとしたら毎回すごく悩みさそうなので、なんとなくでいいと思う。悩むメリットもあんまりなさそうだし。
気を付けよう!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

BЯunoの技術ブログ。日々学んだことを記録していくよ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!