HTMLのセクション・構造化について学びましょう！

セクションとは？

セクションとは、区切りのことで本に章や節があるように、HTMLにも区分けが必要になります。

HTMLを区分けすることでレイアウトがしやすくなるのと、次に出てくる構造化が関係してきます。

構造化とは？

HTMLを作っているといろんなタグが使われます。また、同じタグが何度も使われている場合、人は内容を見れば何を意味しているかわかりますが、コンピューターは内容を理解することができません。

そこで登場するのが構造化です。

コンピューターに対して、ここは◯◯について書かれていますよ！と伝えることができます。そうすることでいろんなメリットがありますが、今回は説明を省きます。簡単に説明すると人にサイトを見てもらえる機会が増えます。

構造化のやり方ですがしっかりやる場合、細かい設定が必要になってきます。構造化は必要ではありますが、HTMLの知識が十分に付いてからでも遅くないので、今は大まかに構造化をする方法を学んでいきましょう！

よく使われるタグ

header(ヘッダー)タグ

グループの頭部分に使います。サイト全体の頭に使うこともあれば、あるグループの頭に使う時もあります。一つのファイルに複数使用可。

footer(フッター)タグ

グループの足部分に使います。サイト全体の足に使うこともあれば、あるグループの足に使う時もあります。一つのファイルに複数使用可。

nav(ナビ)タグ

ナビゲーションに関するところに使います。グローバルナビ(サイトの上部にあるリンクなど)に使ったり、その他ナビゲーションと呼べるものは全てnavタグを使います。一つのファイルに複数使用可。

main(メイン)タグ

主要な内容の部分に使います。一つのファイルに複数使用不可。

article(アーティクル)タグ

そこだけで独立したコンテンツになりうる場合に使います。一つのファイルに複数使用可。

section(セクション)タグ

上記に分類されないグループに使います。sectionタグはhタグがあるところにしか使えません。一つのファイルに複数使用可。

div(ディブ)タグ

上記に分類されないものでグループをブロック要素(次回説明)として扱いたい場合に使います。意味はないけどグループをまとめたい時に使います。一つのファイルに複数使用可。

span(スパン)タグ

上記に分類されないものでグループをインライン要素(次回説明)として扱いたい場合に使います。文字の一部分だけ変更を加えたい場合などに使います。一つのファイルに複数使用可。

例を見てみましょう

ガーデニング.com

　　
HOME
　　
ABOUT
　　
BLOG

ひまわりの育て方
ひまわりとは？
ひまわりは夏に咲く花です。
種まき
4月〜6月がまきどきです。30cm間隔をあけ、2~3粒1cmほど土を開け、まいていきます。
カテゴリー

　　
花
　　
野菜
　　
土
　　
肥料

©ガーデニング.com All Rights Reserved.

読んでいけば何となく理解できると思いますが、ちょっとわかりにくいですよね。セクションを使い、しっかりわけるとこんな感じになります。

図で表現するとこのようになります。

  

   
ガーデニング.com
  
　　


  

    
ひまわりの育て方
    

      
ひまわりとは？
      
ひまわりは夏に咲く花です。
    
    

      
種まき
      
4月〜6月がまきどきです。30cm間隔をあけ、2~3粒1cmほど土を開け、まいていきます。
    
  
  

こうすることで人が見てもコンピューターが見てもわかりやすくなります。