せくしょにんぐ・こんてんつ～？①

Posted at 2019-10-28

#前回記事の振り返り
2回目まして、あさちゃんです。
前回は
「HTMLの用語の意味を直訳と意訳を交えて解釈する」
という内容で投稿したのですが、
いいねやコメントをくださった方ありがとうございました。

コメントで、とても心の優しいユーザーさんたちから

　＜　HTMLの歴史を辿ったほうがいいかもね！

といったアドバイスと共に詳しく解説してくださる方もいて、
とても興味深いなと感じたと同時に、

　｡ O（　ぽんぽん見知らぬ方からレスが返ってくるQiitaすげえ。アクティブ～！　）

と思いました。

HTMLの歴史については本当に興味が沸いたので、（CERNってワード、トキメキますよね♡）
勉強してまた別の機会に記事にしたいなと思います。
改めてコメントくださった皆さんありがとうございました！

#今回のテーマ
月半ばになり、社内では事務職のほうで空き時間が増えてきましたので
とってもありがたいことに毎日たっぷりコーディングの勉強をさせていただいています。

そこで、先輩が貸してくださった参考書に
サラッと記載されていた【セクショニングコンテンツの種類】というタイトル...

　＜　せくしょにんぐ・こんてんつ～？

となりまして（タイトル回収）

①そもそも言葉の意味がわからない
②セクショニングコンテンツの種類とは？
③調べてみたらHeader要素とFooter要素はセクショニングコンテンツ組には入ってないらしい
④div要素との使い分けがわからない

など、まだまともにコーディングしたことない初心者には「？？？」なことが多すぎたので
記事にして深堀りしてみることにしました。

HTMLの初心者仲間さんだけでなく
HTML5になってから結局のところよくわかってない...みたいな方にも
ちょっとはお役に立てる内容になるといいな！
という淡い期待を込めて。

#①言葉の意味を知る：セクショニングコンテンツ
セクショニングコンテンツという概念はそもそもHTML5から導入された要素のようです。

Web辞書で検索をかけてみると

Section　⇒　区切り　、Contents　⇒　内容物

という意味になっています。
中学で習う英単語ですが私は調べないとパッと出てきませんでした。（大卒）

つまり、『WEBサイトの内容を区切る要素』となりますね！

WEBサイトの内容を区切るというのはつまり、見出しごとに

でもでも、別にあえてHTML上で区切ったりしなくたって、
人間はWEBの内容に『見出し』があれば
「Aの見出しとBの見出しは別の内容」、という風に分けられていることが認識できるし、
新聞のコラムみたいにテーマと少し違う内容が書いてあっても
「ここには蛇足的な内容が書いてあるな」と認識できます。

じゃあなぜ必要なのか。

さらに調べてみると、ちゃんとワケがありました。

##セクショニングする理由
コンピューターに理解してもらうため

例えばより多くのユーザーの検索結果に引っかかり、上位に表示させるため、
SEO対策の一つとして、きちんとセクショニングする必要があります。

こちらがWEBサイトが検索エンジンに表示されるまで3つのステップ

STEP1：クローリング（検索ロボットがあらゆるページを巡回･情報収集）
STEP2：インデキシング（集めた情報を整理整頓・データベースに格納）
STEP3：スコアリング（STEP2までの情報を踏まえて入力されたキーワードとの関連度合いを評価・表示順を決定する）

セクショニングが活きてくるのはSTEP2のインデキシング！
きちんとした文書構造で書かれているかも含め、
WEBページの内容の濃さ･正確さなどの観点から
インデキシングの対象となるか否かが決定するみたいです。

　＜　僕に見つけてほしいなら内側までちゃんと作ってね！

ってことですね！がんばりましょう！

#②４つの種類と利用シーン
セクショニングコンテンツには、article・nav・aside・sectionの4種類がありますが
それぞれどんな時に使うのかをしらべました！

###article要素
articleは日本語で「記事」という意味
その名の通り、記事のようにまとまった内容..ブログ記事やそのコメントなど
それだけで独立した内容となっているセクションを示すための要素。

###aside要素
asideは「余談」とか「脱線」みたいな意味
メインコンテンツの脇で、補足的な情報を載せたいときにつかう要素です。
新聞や参考書の「コラム」とかですね！

###nav要素
navはnavigationの略で、WEBページ上のナビゲーションを指します。
ページ上をスムーズに移動するためのセクションをこの要素で囲っておくみたいです。

###section要素
他の3種（article・aside・nav要素）のどれにも当てはまらない内容を囲います。

勉強したての私は、4種類の中でsectionが一番よく見る要素！っていう印象なんですが
実際に業務で使い始めたらどうなんだろう？
作るWEBページによって変わるのかな。

#次回につづく
文章書くの遅すぎマンなので一旦今回はここまでにして
後半をまた来週頭くらいに投稿したいと思います！

ここまでで間違ってることなどあったらぜひご指導ください！！

#私がおすすめしたい、かわいいQiita記事
私にメンターとしてついてくれている先輩が2人いらっしゃるのですが、
おふたりともQiitaでとてもかわいい制作物を紹介してまして...
HTMLとCSSを使ったものばかりで、読むたびに「わたしもいつか...！」とやる気になります。

私のような初心者さんたちもこれを読んだらきっともっと勉強したくなる！

と思うので今回と次回で１つずつシェア！🍂

みなさんの【勉強がんばろう！】と思えた
おすすめ記事があったら是非教えてください！