bbbbruno.qrunch.io読者になる5セマンティック、ああセマンティックHTML投稿日:2019-11-08最終更新:2019-11-09筆者のブログで記事をみるHTML5でセマンティックなタグがたくさん増えた。今日はそれらのタグでよく使いそうなものを改めて学んだ。セマンティックとは?セマンティックとは、一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。要は「意味を持つこと」である。div要素はなんの意味も持たないが、h1要素なんか「このページの一番重要な見出し」という意味を持っている。そんななんらかの意味を持っていることを「セマンティック」と言う。HTML5で増えた新参者たちsection要素ブロックひとまとまりをsectionで明示できる。sectionは入れ子にすることができる。sectionには必ず見出しが必要で、一つが好ましい。見出しレベルについて調べてみた上の記事なんかではsectionに見出しタグを入れるとレベルが変わるとかどうとか言っているが、正直よく分からない。main、header、footer要素サイト全体をヘッター、メイン、フッターで分けられる。article、aside、nav要素articleはそれ単体で完結するものを表す。ブログ記事やニュース記事など。ブログのトップページに複数ある場合もある。asideは補助的な内容を表す。ブログでいうと、サイドバー全体に当たる。navはナビゲーション部分。ヘッダーだけじゃなくて、本文やフッターにも書いていい。上の画像の分け方も一例だけど、他の分け方も考えてみるとheaderの中にnavを含める(グローバルナビはヘッダーの一部として考える)。articleとasideをmainで囲んで、header、main、footerという3構造にする。こんな感じの分け方もありかもしれない。セマンティック症候群にならないように完璧に使い分けようとしたら毎回すごく悩みさそうなので、なんとなくでいいと思う。悩むメリットもあんまりなさそうだし。bbbbruno.qrunch.ioBЯunoの技術ブログ。日々学んだことを記録していくよ。Qrunch.netサーバー提供フィードバックを送信する。