【HTML】「section」と「aside」の使い分け【学習メモ】

HTML/CSS

みなさんこんにちは!おさかなです!

今回は「「section」と「aside」の使い分け」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・「section」と「aside」の使い分けが出来ていない方
・「div」との違いを知りたい方
・HTMLを勉強中の方

はじめに

今回「section」と「aside」の使い分けを考えるきっかけになったのは「256times」というコードレビューのイベントに参加したからです…!

おさかなは”ある箇所”を全て「div」で記述していたのですが、「div」を多用するのはあまり好ましくない、ということで自分のソースコードを見直すきっかけになりました…!

「section」,「aside」,「div」,「article」それぞれの役割

「section」

「section」の特徴としては、「意味のあるグループのコンテンツ」に適用されます…!

主に「見出し」要素として使用されることが多く「タイトル」や「テーマ」を表せるような箇所に記述するのが適切とされます。

「aside」

「aside」の特徴としては、「まわりのコンテンツの補足」に使用されます。

主にサイドバーや関連記事などで使用されることが多いですが、サイドバーの意味を持つ要素ではないので、そこは注意しておく必要があります。

「div」

「div」の特徴としては、「意味がないまとまり」に使用されます。

多用するのはあまり好ましくなく、どの要素の表現も不適格だった場合の最終手段になります…!

「article」

「article」についても軽く触れておきます。

特徴としては、「独立したコンテンツのセクション」に使用されます。

かなり限定的な意味を持っており、主にコンテンツのマーキングなどに使用されることが多いです…!

感想・まとめ

今回は「「section」と「aside」の使い分け」について、書いていきました…!

いかがだったでしょうか?

少しややこしいですが、ざっくりとした要素の意味はこんな感じです…!

それぞれの要素の役割を意識しながら、使い分けができるようになると、ソースコードがもっと見やすくなると思うので、頑張っていきたいと思います…!
(一緒にキレイなソースコード目指しましょう~!)

 

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

 

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました