36歳建設業がプログラミングを始めてみる　2. HTML vol.3

2‐2 main,section,aside…などのタグとは

今回はなにを学ぶのか―？タグ⇒<>？　また出てきた、、、何か違うんだろうか。

どうやら数あるタグの中でも、どんなWebサイトでも使われている7つのタグがあるらしい。いわゆるスタメンですな。

<div　class＝”○○”></div>のように指定しなくても良いものがあるようなので、頻出するものは押さえとこう。

❶header（ヘッダー）

headerとは
header（ヘッダー）はWebサイトにおけるヘッダーを明示するタグです。header要素はアウトラインを生成しません。

header要素は、導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。

んーよくあるサイト上の上の部分だよね？あってるよね？！ｗ

❷nav（ナビ）

navとは
nav（ナビ）はWebサイト内でナビゲーションリンクであることを明示するタグです。nav要素は文書内に複数使用することができます。

nav要素は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。

リンクがまとまっている感じのところかな。

❸main（メイン）

mainとは
main（メイン）はHTML文書内の主要コンテンツであることを明示するタグです。同一HTML文書内に1つしか使用することができない点に注意しましょう。mainは文書のアウトラインに影響しません。

main要素は、文書の主要な内容を表します。主要な内容とは、文書の中心的な主題、またはアプリケーションの中心的な機能に直接関連または拡張した内容の範囲のことです。

これが文字通りメインだと、、、。

❹section（セクション）

sectionとは
section（セクション）はWebサイト内で文章のまとまりを明示するタグです。基本的に子要素に見出し（h1〜h6）を持ちます。sectionはアウトラインを生成します。

section要素は、HTML文書の中で単独のセクション(区間)を表します。セクションを表現するより意味的に具体的な要素がない場合に使用します。必ずではありませんが、通常はセクションには見出しがあります。

これはどれにも当てはまらないセクションを構成する際に使うらしい。
万能なやつ。

❺article（アーティクル）

articleとは
article（アーティクル）はブロク記事のように自己完結するコンテンツを明示します。article要素は子要素に見出し
❺（h1〜h6）を含む形で記述します。また、article要素の中にarticle要素を入れ子として配置することもできます。

article要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、(集合したものの中で)個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事などが含まれます。

独立した記事のまとまり（ブログや記事など）で使われるやつだって。あまり使わないかもね

❻aside（アサイド）

asideとは
aside（アサイド）はサイドバーのように補助的なコンテンツを明示するタグです。サイドバーに広告、人気記事、新着記事、SNSシェアボタンなどのコンテンツを含んだ形で使用するのが一般的です。

aside要素は、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。

サイドバー的なやつ見たい。アサイドいうくらいだもんね。

❼footer（フッター）

footerとは
footer（フッター）はWebサイト内のフッターを明示するタグです。コピーライト（著作権情報）などを書くのが一般的です。footer要素はアウトラインを生成しません。

footer要素は、直近の区分コンテンツまたは区分化ルート要素のフッターを表します。フッターには通常、そのセクションの著作者に関する情報、関連文書へのリンク、著作権情報等を含めます。

よくあるサイト下の部分のやつだよね？あってるよね？！ｗ

まとめると

タグの中にも神７（セブン）がいたということ。
要は大まかなゾーニングが出来たほうがよいのと、だからこそある程度
みんな似たようなサイト構成になっているということなんだろう。

そうなると、作り方の王道パターンがあるんだろうな
それをまずマスターすることが今は一番かもね。

つづく