「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『HTML（エイチティーエムエル）』を学習したい方向けに、
基本的なポイントをまとめてみました！
（HTML5に準拠）
そもそも『HTML（エイチティーエムエル）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、今回の記事は、
以下、別記事でご紹介した知識前提で書いています。
-
-
【基礎から学ぼう！】『HTML（エイチティーエムエル）』学習、超基本のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、 文系・初心者の私が、 プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かった、 ということをまとめて ...
続きを見る
『テキストエディタ』・『タグ』。
これらの単語を聞いてピンと来ない方は、
ぜひ上記の記事を先にご参考下さい。
[toc]
<section（セクション）>タグで意味あるひとまとまりを表す
<section>タグは、
一般的なセクションを定義するタグです。
セクションとは、
区切れるひとまとまりのことです。
別記事にてご紹介した、
<header>タグや<footer>タグも、
セクションを定義するタグと言えます。
<section>タグは、
<header>タグや<footer>タグ等、
他のひとまとまりを表すタグでは意味が合わない場合に使います。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<section>
<h1>見出しです。</h1>
<p>プログラミング学習のツボです。</p>
</section>
</body>
</html>
11行目〜14行目が<section>タグです。
実際に表示させてみましょう。
<header>や<footer>で文字を表示した場合と、
見た目は変わりませんね。
「区切れるひとまとまり」という意味を
ブラウザに伝えていることがポイントです。
また、<header>や<footer>タグに当てはまらない、
「区切れるひとまとまり」ですので、
<section>タグの中には、
<h>タグで見出しが出来る場合が一般的です。
逆に言うと、
見出しが作れないような場合は、
<section>タグは適当では無いかもしれません。
単純にレイアウト・デザイン目的でひとまとまりを作りたい場合は、
次に学習する<div（ディブ）>タグを使いましょう！
<div（ディブ）>タグはレイアウト・デザイン目的で使う
特に意味を持たず、
レイアウト・デザイン目的でひとまとまりを作りたい場合は、
<div>タグを使います。
『CSS』の学習を始め、
Webページの装飾を学習を進めると、
<div>タグを良く目にするようになります。
<div>タグがどう活躍するか、
詳細はその時までのお楽しみで大丈夫です。
意味を持たず、
デザインやレイアウト目的でひとまとまりを作る場合は、
<div>タグを使う。
『HTML』を学習している間は、
まずはこれだけおさえておきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<div>
<p>プログラミング学習のツボです。</p>
<p>楽しみながら学習しましょう。</p>
<p>ひとつずつ焦らずに学習しましょう</p>
</div>
</body>
</html>
11〜15行目です。
ブラウザ表示させてみましょう。
見た目はただ文章を3行表示しているだけですが、
<div>タグでこの3行を囲むことで、
ブラウザはこの3行がひとまとまりということを認識します。
この3行がひとまとまりとブラウザに認識されることで、
まとめてブラウザ上の表示位置を変えたり、
余白を変えたり、色を変えたり出来るわけです。
『CSS』の学習に突入し、
Webページのデザインを触るようになったら、
目にする頻度が増えます。
<div>タグってあったなと思い出せるように、
イメージだけ頭に入れておきましょう！
<aside（アサイド）>タグは余談・補足情報で使う
メインコンテンツの補足として触れておきたい内容だけど、
無くても本題上問題は無い。
そんなコンテンツは、<aside>タグで表現します。
ちなみに、「aside」とは、
英語で「余談」とか「雑談」という意味です。
コードを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<aside>
<p>補足情報です。</p>
</aside>
</body>
</html>
11〜13行目で<aside>タグを使っています。
ブラウザは補足情報だなと読み取って、
画面に表示します。
これまで同様、
画面の表示上に変化はありませんが、
<aside>タグで囲まれた部分を、
ブラウザは「補足情報」として認識して表示しています。
<article（アーティクル）>タグは記事セクションを示す
ブログやニュースサイトを見ると、
各記事毎にまとまりが別れていますよね。
そういった一つで完結している個別記事のような区切りは、
<article>タグを使います。
早速、実際の書き方を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<article>
<h1>記事の見出し</h1>
<p>記事の本文</p>
</article>
</body>
</html>
11〜14行目で<article>タグを使っています。
実際にブラウザ表示させてみましょう。
これまで同様、<article>タグで囲んでも、
表示のされ方には変化はありませんが、
ブラウザは、
しっかりひとまとまりの「記事」として認識しています。
何故ブラウザ表示が変わらないのにタグを分けるのか？
ここまで色々なコンテンツの構造を意味するタグを学習してきましたが、
<section>、<div>、<aside>、<article>タグ等、
実際にブラウザで表示した場合に違いは出ません。
では、何故タグを分けるのでしょうか？
一番の理由は、
Google等の検索サイトが、
どこに何が書いてあるコンテンツなのか、
はっきりと検知出来るようになるからです。
タグがしっかりと使い分けられていると、
コンテンツ構造が分かりやすい、
良いサイトだと認識され、
Google内で検索順位が上がる一つの要因になります。
また、後で修正作業を行う際、
自分や他の誰が見ても、
ここはこの意味でまとまりを作ったんだなと、
理解し易くなります。
慣れるまでは、
「全部<div>タグでいいじゃん！」
とか思うかもしれませんが、
SEOの観点、保守の観点からも、
まとまりの意味に合わせてタグを使い分けましょう。
まとめ
・<section>タグ
・<div>タグ
・<aside>タグ
・<article>タグ
・SEO、保守の観点から、コンテンツ構造に合わせてタグを使い分けよう。
毎度同じ締めくくりをしている気がしますが、
全てを丸暗記する必要はありません。
こんな時は何か使えるタグがあったぞと、
頭に少し浮かぶ感じで大丈夫です。
焦らず、一つ一つ進めて行きましょう。
皆さんの『HTML』学習、
応援しています！