動画でプログラミング入門をしようはじめにウェブページを作る時、文章の構造を意識してHTMLコーディングしていますか?HTMLには、各部分でどんな内容を書いているのかグルーピングするための要素があります。いったグルーピングをしないで書くのも間違いではありません。情報をグループ化して文章構造をはっきりとさせると様々なメリットがあるのです。内容を動画でも解説しています。情報のグループ化の重要性div要素とHTML5以降の新要素HTML5より前のバージョンでは、文章のかたまりをdiv要素でまとめていました。div要素は意味を持たない汎用ブロックで、こちらを使っている方も多いかもしれません。HTML5以降ではこれに代わる新要素が登場しており、後述する理由からdivだけでなく文書の意味に応じて使い分けることが推奨されています。詳しくは後ほど紹介しますが、headerやfooter、article等といった要素です。なんとなくどんな部分に使うのか想像がつきますね。情報のグループ化によるメリット文章の構造がわかりやすくなる人間にとってはもちろん、コンピュータからみても何の文章が書かれているのか見やすくなるのが大きな利点です。複数人でコードを書く時にもわかりやすくて便利ですし、検索エンジンが膨大なウェブページの中から必要な部分を抽出してくるのにも役立ちます。スタイルをあてやすくなるウェブページのデザインはCSSを使って行います。CSSで定義したスタイルをHTML文書に適用する際、情報ごとにグループ化されていると非常にスタイルをあてやすいです。プログラスではCSSの講座も解説していますので、興味のある方はこちらも参考にしてください。CSS入門(Proglus)情報のグループ化を行う要素ここからグルーピングに使用できる新要素を1つ1つ見ていきましょう。header文書のヘッダー部分を示します。ここには大抵ページ自体の見出し(基本的にはh1見出し)や、後述のナビゲーションが入ることが多いです。footer文書のフッターを示します。ウェブページの著作権表記や商標登録表記などを入れることが多いです。navナビゲーションを示します。ナビゲーションとは、ページ上部でページ全体の構成や各セクション・ページへのリンクが貼られている部分のことです。main文章のメインコンテンツ領域を示します。article記事コンテンツを示す要素です。ページ・アプリケーション・サイトなどの中で自己完結しており、個別に配信や再利用を行うことを意図した構成物に適用します。記事に対するコメントやブログの記事等です。sectionセクションを示す要素です。セクションとは見出し+それに伴うコンテンツの組み合わせを指しますが、見出しがない場合もあります。articleと似ていますが、articleはその部分だけで完結した文章として成り立つ場合に使うのに対し、sectionはその限りではありません。他ページへのリンクを含んでいて、それをクリックした遷移先でも情報を確認する必要がある場合はsectionを使うと良いでしょう。aside余談要素を示します。メインコンテンツとは関連性が低い情報のことです。「アサイド」は日本語で「脇へ」とか「傍らに」といった意味で、まさにその意味合いとなっていますね。サイドバーや広告の表示に使われることがあります。練習用のページを作ってみよう説明を読んでもイメージが沸きにくいですので、実際に先ほどの要素を含んだページを作ってみましょう。ページのイメージ完成形としてこのようなウェブページを作ります。文章構造このウェブページの文章構造は下記のようにします。コード例それでは実際に書いてみましょう。エディタで「group.html」というファイルを新規作成し、下記のように記述してみてください。先の項目で学習した各要素が折り込まれていることに注目です。リンク先はダミーとして”#”と書いています。クリックしても何のページにも飛ばないですがテストページなので問題ありません。<p>グループ化を学べるサイトを10個紹介いたします。</body></html>ファイルを保存して、ブラウザで表示させてみましょう。先ほどのイメージ通りに表示されれば成功です。今回学習したグルーピングのための各要素(header・nav・main等)がなくてもHTMLとしては間違いではありません。興味のある方はこれらを外して表示させてみてください。同じ表示になるはずです。情報のグループ化をした方がいいですか?必須ではありません。グループ化をしなくても得られる表示は同じです。先述の通り文書構造がわかりやすくなる・スタイルがあてやすくなるというメリットがあるため、グループ化することを推奨します。divだけを使用してはいけませんか?div要素だけ使用しても情報のグルーピングはできます。新要素を使う方が文章構造をより正確に表現できるのでおすすめです。どの要素をどこに使うべきかわかりませんこれについては100%の正解があるわけではなく、結局はウェブ製作者の意図に合わせて様々なパターンが考えられます。正解は1つではありませんので、深く悩みすぎずに用途に合わせて設計しましょう。まとめHTML5の新要素を使った情報のグループ化方法について解説しました。本格的なウェブサイトであればあるほどグループ化は重要になります。覚えてグループ化を心がけてください。本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。・About・プライバシーポリシ。