##はじめに
ドットインスト―ルというプログラミング学習サイトを使ってHTMLを学習したので、備忘録代わりにこの記事を書きます。なので間違っているか知れないのであくまで参考程度にとどめていただけると幸いです。もっと詳しく知りたい！という方はこちらを見ていただくといいと思います。今回はHTMLのセクションについて説明したのちに、わかりやすい例を見ることでHTMLの”セクション”を理解できればと思います。
##HTMLのセクション
まず、本題に入る前にHTMLの基本的な構造を見ていきたいと思います。
下にHTMLファイルを作る際の骨格になるような文書を載せてみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<title>はじめてのHTML</title>
</head>
<body>
<p>こんにちは！</p>
</body>
</html>
これの細かな内容については前回の記事に書いてあるので、わからない人はそちらを参考にしてください。
今回はこの中でも<body></body>で囲まれた部分についてのお話です。
<body></body>で囲まれた部分は簡単に言うとホームページで私たちが実際に目にするような文章を実際に記入する場所になります。
そして、ホームページ本文というのは大きく分けて以下の領域に分けることができます。
（それぞれの領域がhtmlファイル上でどのようなタグで表されるのかを矢印の先で示しています）
- header → <header></header>
- footer → <footer></footer>
- nav → <nav></nav>
- article → <article></article>
- aside → <aside></aside>
- section → <section></section>
では言葉をきいただけではわからないと思うので、ひとつひとつ意味を見ていきましょう。
header
これは言われなくてもわかるよって人がそこそこいるのかもしれません。（私はわかりませんでしたが
）ホームページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。
footer
footerは逆に、ホームページの下部スペースに位置し、どのページが開かれても常に共通して表示される部分です。会社概要であったり、著作権情報なんかが書かれてたりします。
nav
navは"navigation"の略です。そのため、ホームページ内の目次やメニューなどが書かれている箇所はnav領域、ということになるでしょう。
aside
ホームページの内容と直接は関係のない、副次的な内容を含む領域です。
article
内容が単体で完結するようなとき、そこはarticle領域と言えます。
section
今まで上で挙げてきたような領域として説明できないものの
領域が一つのまとまりになっているとき、その領域はsection領域と言えます。
何らかの見出しをつけたくなるような塊とも言えます。
ここまで勉強してきて、**section領域とarticle領域の違いがよくわからない…何が違うんや…**とか思っていたら、やっぱりわかりにくいと思う人は多いよう
こんなまとめをしてくれてる人がいました→ HTML5のお勉強
すごく丁寧にまとめてくれてます。うーん…でもやっぱりわかりにくい…
きっとこれは経験を積んだらわかるようになるものなんだろうな、ということで保留にしてしまいます;(
いつかわかるといいな。
##セクション分けの例を見てみよう！
もっと具体的なものを見ないことにはわからないと思うので、最後に実際にありそうなサイトのセクション分けを見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>はじめてのHTML</title>
<meta charset="utf8">
<link rel="stylesheet" href="mystyles.css ">
</head>
<body>
<header>
<h1>おいしいごはん</h1>
<nav>
―ホーム
―このサイトについて
―プロフィール
<nav>
</header>
<section>
<h1>今月の美味しいごはん</h1>
<article>
<h1>美味しいごはん#12</h1>
<p>卵かけごはん美味しすぎる！</p>
</article>
</section>
<aside>
<h1>おすすめレシピ本</h1>
―BOOK 1
―BOOK 2
―BOOK 3
</aside>
<footer>
このサイトは@taguchiによって運営されています。
</footer>
</body>
</html>
漠然とした説明よりはかなりわかりやすくなったんではないでしょうか？
説明を飛ばしていましたが、<h1></h1>に挟まれた文章は「見出し」という意味になります。そのため、ホームページ上では通常の本文よりも大きく目立つように表示されます。
今回は出てきていませんが、ほかにも<h2></h2>、<h3></h3>...などがあり、数字が大きくなるにつれ、見出しの大きさも小さく表示されます。大きさはホームページを作った人の価値観で自由に決めればOKです。
##終わりに
とにかく、HTMLでは自分の書きたいことを構造的に整理整頓することが求められるみたいです。きっと書き始めたらいろいろわかってくるんだろうなあ…。
ということで初心者のみなさん一緒に頑張りましょう！