今回は文章でよく使うタグをみてみましょう。今は覚えずに「こんなタグがあるんだ」くらいの感じでOKだよ。
h1〜h6（エイチワン〜エイチシックス）
<article>
<h1>サンプル八百屋</h1>
<p>サンプル八百屋のお取り扱い商品</p>
<section>
<h2>野菜</h2>
<section>
<h3>根菜</h3>
<p>根菜は大根や人参などを取り扱っています。</p>
</section>
<section>
<h3>葉物野菜</h3>
<p>葉物野菜はほうれん草や小松菜などを取り扱っています。</p>
</section>
</section>
</article>見出しを表す。
- h1から順に使う（ h1が一番大きな見出し）
- 同じ見出しタグを複数使ってもよいが、レベルを合わせる
- タグをくくる場合はフレージングコンテンツ（ a span img等）のみ入れられる
- imgを入れる場合はalt属性必須
p（ピー または パラグラフ）
<p>おじいさんは山へしばかりに、おばあさんは川へ洗濯にいきました。</p>
<p><img src="momo.jpg" alt="桃が川上から流れてくる絵"></p>
<p>おばあさんが川で洗濯をしていると、川上から大きな桃が、どんぶらこどんぶらこと流れてきました。</p>段落を表す。
- テキスト以外も入れて良い（画像やフォーム欄など）
- タグをくくる場合はフレージングコンテンツ（ a span img等）のみ入れられる
img（イメージ）
<p>おじいさんは山へしばかりに、おばあさんは川へ洗濯にいきました。</p>
<p><img src="momo.jpg" alt="桃が川上から流れてくる絵"></p>
<p>おばあさんが川で洗濯をしていると、川上から大きな桃が、どんぶらこどんぶらこと流れてきました。</p>画像を表示する。
- 終了タグはなし
- alt属性（代替テキスト）は基本必須なので極力設定する
- alt属性は装飾用の意味の無い画像もalt=””と空で設定するのが良い
- alt属性のテキストは音声ソフトで読みあげられるので、ただ”桃”の様にはせず、”桃が川上から流れてくる絵”の様に具体的な内容を入れる。
imgタグは次の記事で詳しく説明します。
figure、figcaption（フィギュア、フィグキャプション）
<p>私は犬を３年飼っています。</p>
<figure>
<img src="images/dog.jpg" alt=" 柴犬の写真">
<figcaption>１年前のタロー</figcaption>
</figure>自己完結する図・表・コード等と、その補足。
- 自己完結している必要があるので、図などが前後の文章に影響を与えない場合に使える
- figcaptionは必須ではない
- img以外も入れられる（table等）
<p>10代から50代にアンケートをとりました。</p>
<figure>
<img src="images/toukei.jpg" alt=" 統計表">
<figcaption>アンケートの結果</figcaption>
</figure>
<p>上記の様に、意外な結果となりました。</p>
これだと表の画像が無いと結果がわからないですね。
このような場合は使えない（自己完結していない）ので全体をdivでくくって、キャプションはpが良いと思います。
<p>10代から50代にアンケートをとりました。</p>
<div>
<img src="images/toukei.jpg" alt=" 統計表">
<p>アンケートの結果</p>
</div>
<p>上記の様に、意外な結果となりました。</p>a（アンカー または エー）
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="product.html">商品一覧</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>リンクの設定。
- ページ内リンクはIDを指定
- 別ページのID を設定することも可能
aタグに入れられるタグは、aタグの親によって決まる。
<div><!-- aタグの親 -->
<a href="index.html">
divタグに入れられるタグならOK
</a>
</div>aタグも次の記事で詳しく説明します。
br（ブレイク または ビーアール）
<p>
今日とても驚く出来事があった。<br>
電車で隣の駅まで出かけた時のこと、・・・
</p>文章を改行する。
- 終了タグはなし
- クラス名を付けることもできる
- 文章中でのみ使用する
- 隙間を空ける目的で連続して使わない
ul、ol、li（ユーエル、オーエル、リスト）
<h2>カレーの材料</h2>
<ul>
<li>牛肉</li>
<li>じゃがいも</li>
<li>人参</li>
</ul>
<h2>カレーの作り方</h2>
<ol>
<li>材料を切る</li>
<li>肉を炒める</li>
<li>野菜を炒める</li>
<li>水を入れて煮込む</li>
<li>ルーを入れる</li>
</ol>使い方はliをulかolでくくる。
ul（アンオーダーリストの意味）は順不同リスト。
ol（オーダーリストの意味）は順番リスト。
li（リストアイテムの意味）はそれらの項目。
- 順番が決まっていない時はul
- 順番が決まっている時はol
- ul olの子要素（直下）はliしか入れられない
- li の中にul olを入れて、入れ子にしても良い
dl、dt、dd（ディーエル、ディーティー、ディーディー）
<dl>
<dt>ｈ1 ～ h6</dt>
<dd>見出しを意味します</dd>
<dt>p</dt>
<dd>段落を意味します</dd>
</dl>使い方はdt ddのセットをdlタグでくくる。
dl（デフィニションリストの意味）は定義（説明付）リスト。
dt（デフィニションタームの意味）は定義項目名。
dt（デフィニションディスクリプションの意味）は定義項目の説明。
- dtが１つでddが複数などの形もOK
- dlの直下はdt dd divのみ入れられる ※divはdt ddをグループ化する時のみ使用できる
- dtにheader footerセクショニングコンテンツ、ヘッディングコンテンツは入れられない
table、tr、th、td（テーブル、ティーアール、ティーエイチ、ティーディー）
<table>
<tr>
<th>東京</th>
<th>神奈川</th>
</tr>
<tr>
<td>13,515,271人</td>
<td>9,126,214人</td>
</tr>
</table>| 東京 | 神奈川 |
| 13,515,271人 | 9,126,214人 |
tabel（テーブルの意味）は表。
tr（テーブルロウの意味）は表の１行。
th（テーブルヘッダーの意味）は見出しセル。
td（テーブルデータの意味）は内容セル。
- tbody thead tfootなどでセクションを分けることも出来る
- レイアウトにtableを使用しない
span（スパン）
<p><span>桃太郎</span>は鬼退治へ行きました。</p>意味を持たないタグ。（意味の無いタグなので下記用途等で使用される）
- 基本文中で使用する
- 文字の色やサイズなどを部分的に調整する
- ダミーや飾り用の空要素として使う
- divに似ているがdivはブロックボックス、spanはインラインボックス
「ブロックボックス」と「インラインボックス」の違いは、別の記事で詳しく解説します。
strong（ストロング）
<p>入室の際は<strong>必ずマスクを着用</strong>してください。</p>重要性が高いテキスト。
- 重要、緊急など、強い意味の場合に使用する
- 入れ子にしてより強調することも可
- 太字にする目的で使わない（strongでくくると太字になる）
em（エム）
<p>いちごは<em>甘くて</em>すっぱい</p>
<p>いちごは甘くて<em>すっぱい</em></p>テキストの強調。
- くくる場所でニュアンスが変わる
- 入れ子にしてより強調することも可
- 斜体にする目的で使わない（ブラウザによっては斜体になる）
b（ビー または ボールド）
<p>今回ご紹介する商品は「<b>自動クルミ割り機</b>」です</p>注目テキスト。
- strong emが適さない時に使用
- 強調ではなく見た目を太字にする
HTMLのコメント
<!--以下一時的に非表示-->
<!--
<p>
今日とても驚く出来事があった。<br>
電車で隣の駅まで出かけた時のこと、・・・
</p>
-->HTMLには画面に表示されないテキストを入力できる「コメント」という記述方法があります（コメントはタグではありません）。
コメントは<!−−この間に記述−−>の様に記述します。HTMLファイルの中にメモを残したり、一時的にコードを非表示にする目的で使用されます。
覚えるのが大変そうです。
最初は覚える必要はなく、タグを見ながら「これでくくろうかな？」と繰り返していくうちに徐々に覚えられるから大丈夫。次の記事はaタグとimgタグを詳しく学びながらHTMLの属性についても学びます。