全てではないけれど「骨組み」ができるようになるよ。
「基本のタグ」とは、ページをつくるときによく使うタグ（＝書式）のこと。本や新聞をイメージしてください。大きな見出しでタイトルが書かれ、小見出し、段落、写真が掲載されています。
Webサイトも同じように「見出し」「段落」「写真（画像）」を表す「タグ」を使って、コードに「意味を持たせる」ように作成していきます。
なぜ意味を持たせる必要があるのか？それは、Webページを巡回する検索エンジンのロボット（クローラー）が理解できるのは「プログラミング言語だけ」だからです。
クローラーの仕事は取得した情報を整理し、データベースと呼ばれる場所に格納すること。その際「正しいタグ」で構成されていないページは「正しい評価」をすることができません。
結果として、検索順位を上げ、書いた記事が読まれるために「正しいタグ」が必要なのです。
目次
タグのルール
「タグ」とは<〇〇>～</〇〇>で囲まれたコードの<カッコ>部分。種類に応じて、段落なら「pタグ」と呼び、<p>～</p>で表現されます。
「タグ」の主なルールは以下の通りです。
- 閉じタグを忘れないこと（閉じタグのない一部の種類は覚える）
- 開始タグと閉じタグの間に本文を入力すること
- 見た目を調整するためにタグを使わないこと（タグの意味を考える）
③について補足すると、段落を大きく太字にしたいからと見出しタグを使うのはNG。これらを守ることで正しくコーディングできるようになります。
基本のタグ
「タグ」には「閉じタグ」があるものとないもの、そして「要素」という「特徴」があります。「要素」には2種類あり「ブロック要素」と「インライン要素」に分けられます。
「ブロック要素」はその名の通りブロックとして扱われ、自動で改行されます。「インライン要素」はブロックではないため、外側を「ブロック要素」で囲むか、CSSの設定がなければ改行されません。見出しの中など文中に使われることが多い要素です。
A.リンク｜<a>
「リンク」はボタンや文章に内部または外部リンクをつけるときに使います。要素は「インライン要素」です。
<a href="index.html"></a>
B.画像｜<img>
「画像」はパスをいれて画像を表示します。閉じタグがなく「alt（オルト）」に説明文を入れるのが特徴。要素は「インライン要素」です。
<img src="img/sample.jpg" alt="ここに画像の説明を入れます">
C.見出し｜<h1>から<h6>
「見出し」は全6種類で、<h1>から大見出しとなります。要素は「ブロック要素」です。
<h1>ここに見出しを入れます</h1> <h2>ここに見出しを入れます</h2> <h3>ここに見出しを入れます</h3> <h4>ここに見出しを入れます</h4> <h5>ここに見出しを入れます</h5> <h6>ここに見出しを入れます</h6>
D.段落｜<p>
「段落」はパラグラフとも呼ばれ、文章は「pタグ」で囲むのが一般的。要素は「ブロック要素」です。
<p>ここにテキストを入れます</p>
E.順序なしリスト｜<ul>と<li>
「順序なしリスト」はメニューやパンくずリストなど複数の項目が並んでいる部分に使います。「ulタグ」と「liタグ」は必ずセットにしてください。要素は「ブロック要素」です。
<ul> <li>ここにテキストを入れます</li> <li>ここにテキストを入れます</li> <li>ここにテキストを入れます</li> </ul>
F.順序付きリスト｜<ol>と<li>
「順序付きリスト」は申込みの流れのように複数の項目が並び且つ順番が重視される部分に使います。こちらも「olタグ」と「liタグ」は必ずセットにしてください。要素は「ブロック要素」です。
<ol> <li>ここにテキストを入れます</li> <li>ここにテキストを入れます</li> <li>ここにテキストを入れます</li> </ol>
※意味のないブロック①｜<div>
「意味のないブロック」の使い道、気になりますよね。「sectionタグ」「articleタグ」の中などで複数の項目を整理するときに使います。要素は「ブロック要素」です。
<!-- divで囲んだ場合--> <div> <p>ここにテキストを入れます</p> <img src="img/sample.jpg" alt="ここに画像の説明を入れます"> </div> <div> <p>ここにテキストを入れます</p> <img src="img/sample.jpg" alt="ここに画像の説明を入れます"> </div> <!-- divで囲んでいない場合--> <p>ここにテキストを入れます</p> <img src="img/sample.jpg" alt="ここに画像の説明を入れます"> <p>ここにテキストを入れます</p> <img src="img/sample.jpg" alt="ここに画像の説明を入れます">
CSSによるレイアウトを考慮したケースが多いため、章や節という意味を持たない「divタグ」が使いやすいといえます。
※意味のないブロック②｜<span>
「意味のないブロック②」は①のような整理に使うほか、文章中で強調したい、色を変えたい、アイコンを置きたいときなどの装飾に設置します。要素は「インライン要素」です。
<p><span>※</span>ここにテキストを入れます</p>
「ブロック要素」ではないため、レイアウトに影響を出さずに使うことができます。
文章構成のタグ
同様にこちらも重要なタグです。「基本のタグ」との違いは、より外側を囲む「文章を構成するタグ」であること。各々のまとまりがどんな意味を持つのか、を示す「タグ」になります。
全て「ブロック要素」になりますが、「タグ」に与えられた「意味」を中心に覚えてください。
A.ヘッダー｜<header>
「ヘッダー」はページ上部に位置し、ロゴやメニュー一覧を囲むことが多いタグです。「ヘッダー」を複数用意することもあり、ページに一つとは限りません。
<header></header>
「ナビゲーション」はメニューを囲むタグです。「navタグ」の中に「ulタグ」「liタグ」をいっしょに使います。
<nav></nav>
「navタグ」は各ページ共通の「グローバルメニュー」に使われることが多く、ページに一つの方が混乱しません。
C.セクション①｜<section>
「セクション」は「章」「節」を表すタグです。例えば、「セクション」の前に見出しを入れて「章」とし、タグ内にも見出しを入れて「節」などの使い方をします。
<section></section>
コンテンツが長いほどよく使うタグです。「テーマごとに括る」と覚えるといいですよ。
D.セクション②｜<article>
「アーティクルセクション」は記事コンテンツを表すタグです。「セクション」との違いは「一つでコンテンツが完結するか」。
<article></article>
例えば、画像と文章がセットになった記事一覧であれば、その一つひとつが独立した記事ですよね。他とは関連がないため「アーティクルセクション」を使います。
E.サイドバー｜<aside>
「サイドバー」は「アーティクルセクション」といっしょに使うタグです。理由は、サイドバーが並ぶレイアウトとなると、もう一方が読み物（コンテンツ）の枠になるのが自然だから。
<aside></aside>
最近は、1カラムと呼ばれる「サイドバー」がないサイトも多く、設置は必須ではありません。
最後に「フッター」はページ下部に位置し、「ヘッダー」と同じくロゴやメニュー一覧を囲むことが多いタグです。必ずしもページに一つではないところも同じですね。
<footer></footer>
タグの演習
ここまでの内容を使って以下をコーディングしてみましょう。今回は「HTML」だけでOK。
一例ですが「意味」や「見やすさ」を考えると、このようなコードになります。より厳密に書きたい場合は「DOCTYPE宣言」をして、「bodyタグ」の中に以下を入れてください。
<article> <h1>ここにタイトルが入ります。</h1> <div> <img src="img/sample.jpg" alt="サンプル画像"> <p> ここにテキストが入ります。ここにテキストが入ります。 ここにテキストが入ります。ここにテキストが入ります。 </p> </div> </article>
「基本のタグ」「文章構成のタグ」を一通り解説しました。ここに書かれたものが全てではありません。よく使うもの、知らないと困ることをメインにまとめています。
今後ページ作成していくにあたり迷うのは次の2点。どの「タグ」が最適なのか、そして「タグ」の特徴である「要素」の動きが予測できるか、です。
「適切なタグ」は本で確認すると確実ですよ。初心者向けの本であれば「ブロック要素」と「インライン要素」を意識したサンプルコードがあり、詳細に説明しているのでおすすめ。
「基本のタグ」ができれば、サイトができるのかな。