コンテンツ内(文章)でよく使うタグ【HTML基礎】

Webサイトを作ってみよう|連載HTML
記事内に広告が含まれています。

今回は文章でよく使うタグをみてみましょう。今は覚えずに「こんなタグがあるんだ」くらいの感じで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>私は犬を3年飼っています。</p>
<figure>
    <img src="images/dog.jpg" alt=" 柴犬の写真">
    <figcaption>1年前のタロー</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>

使い方はliulolでくくる。

ul(アンオーダーリストの意味)は順不同リスト。
ol(オーダーリストの意味)は順番リスト。
li(リストアイテムの意味)はそれらの項目。

  • 順番が決まっていない時はul
  • 順番が決まっている時はol
  • ul olの子要素(直下)はliしか入れられない
  • li の中にul olを入れて、入れ子にしても良い

dl、dt、dd(ディーエル、ディーティー、ディーディー)

<dl>
    <dt>h1 ~ h6</dt>
    <dd>見出しを意味します</dd>
    <dt>p</dt>
    <dd>段落を意味します</dd>
</dl>

使い方はdt ddのセットをdlタグでくくる。

dl(デフィニションリスト意味)は定義(説明付)リスト。
dt(デフィニションタームの意味)は定義項目名。
dt(デフィニションディスクリプションの意味は定義項目の説明

  • dtが1つでddが複数などの形もOK
  • dlの直下はdt dd divのみ入れられる divdt ddをグループ化する時のみ使用できる
  • dtheader 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(テーブルロウの意味)は表の1行。
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の属性についても学びます。