# 実務でよく使うタグ ここからは、実務でよく使うタグを紹介していきます。紹介するタグは以下になります * [pタグ](#ptagu) * [strongタグ、emタグ、bタグ、iタグ](#strongtaguemtagubtaguitagu) * [hタグ](#htagu) * [aタグ](#atagu) * [imgタグ](#imgtagu) * [videoタグ](#videotagu) * [ulタグ、olタグ、dlタグ](#ultaguoltagudltagu) * [tableタグ](#tabletagu) * [divタグ](#divtagu) `html_and_css`ディレクトリ内に`part3`ディレクトリを作成して、`index.html`を作成しましょう。 こちらもボイラーテンプレートを使用しましょう。 ## pタグ 先ほど紹介した**pタグ**です。 文章を記載する際は基本的に**pタグ**を使用しましょう。 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>HTMLを勉強中</p>
  </body>
</html>
## strongタグ、emタグ、bタグ、iタグ 文章の一部分を強調したい場合は、**strongタグ**を使います。 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>
      <strong>HTML</strong>を勉強中
    </p>
  </body>
</html>
実際にブラウザで確認すると、cssを当てていないですが、`HTML`の部分が太文字になるかと思います。
実はブラウザはタグに応じて、最低限のcssが自動で当たるようになっているのです。 このようなデフォルトのcssを変更したい場合は、新たにcssを当てることで、編集することができます。 ちなみに、強調するのに、**strongタグ**の他にも、**emタグ**、**bタグ**、**iタグ**があります。 各タグの違いに関しては、こちらの記事が参考になるかと思います。 {% embed url="" %} 基本的には、**strongタグ**を使うのが良いかと思います。 ## hタグ 見出しを表す場合は、**h1〜h6タグ(headingの頭文字)**を使います。 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <h2>見出し2</h2>
    <h3>見出し3</h3>
    <h4>見出し4</h4>
    <h5>見出し5</h5>
    <h6>見出し6</h6>
    <p>
      <strong>HTML</strong>を勉強中
    </p>
  </body>
</html>
上記のように記述すると、ブラウザで以下のように確認できます。
h1が1番大きい見出しで、h6が1番小さい見出しになります。 hタグを利用することで、ページが読みやすくなりますし、**SEO対策**（検索エンジンがページ内容や構成を理解しやすくなり、検索上位にきやすくすること）になります。 そのため以下の点に気をつけましょう。 * h1タグは１つにする * h1から順番にしようする ## aタグ 別ページへのリンクを貼る場合、**aタグ**を使います。 遷移させたいページのURL**をhref(エイチレフ)属性**の値に記述します。 別サイトの別ページに遷移させたい場合は、以下のように**絶対パス**を指定します。 
...
    <p>
      <strong>HTML</strong>を勉強中
    </p>
    <a href="https://example.com">別サイトのページ</a>
...
同一サイトの別ページに遷移させたい場合は、**相対パス**を指定します。 そのため、別ページを作成します。 `html_and_css`ディレクトリ内に`about.html`を作成し、ボイラーテンプレートを使用して、以下を記述しましょう。 {% code title="about.html◎" %} ```html Document ``` {% endcode %} 作成したら、index.htmlに以下のように**aタグ**を追加しましょう。 
...
    <p>
      <strong>HTML</strong>を勉強中
    </p>
    <a href="https://example.com">別サイトのページ</a>
   　　<a href="about.html">同一サイトのページ</a> 
...
**相対パス**の指定の仕方は、同ディレクトリ内では、ファイル名を指定し、以下のように、companyディレクトリ内にある場合は、`company/about.html`と指定します。 ``` html_and_css/ index.html company/ about.html ``` 上記を追加し、ブラウザで確認すると以下のようにリンクが追加されたかと思います。 リンクをクリックすると、対象のページに遷移することを確認できます。 ![](https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FRntdSZjpSkjJiLTa326v%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-22%209.23.37.png?alt=media\&token=d8d3fd48-73f8-44a8-8cbf-93ec749f25db) 対象のページに遷移する際に、ブラウザの同じタブで遷移したと思いますが、別タブにてページを開きたい場合は、**target属性**を以下のように指定すると、別タブにて開くことができます。 
...
    <p>
      <strong>HTML</strong>を勉強中
    </p>
    <a href="https://example.com" target="_blank">別サイトのページ</a>
   　　<a href="about.html">同一サイトのページ</a> 
...
また、同じページ内の特定の部分にジャンプするようなリンクを貼ることができ、まず特定の部分に**id属性**を付与します。id属性は任意な名称をつけることができます。今回はh3を対象とします。 
...
    <h1>見出し1</h1>
    <h2>見出し2</h2>
    <h3 id="section-heading-three">見出し3</h3>
    <h4>見出し4</h4>
    <h5>見出し5</h5>
    <h6>見出し6</h6>
...
上記のように記述後、 以下のようにリンクを貼ります。対象の部分の**id属性**をhref属性に指定する場合、`#`（シャープ）を先頭に記述します。 また、対象のリンクに飛んでいるか分かりやすくするため、h1\~h6の後に文章を追加します。 ちなみにダミー文章を作る場合は、`lorem100`と入力して`Enter`を押すと、長文のダミー文章を自動で生成することができます。 
...
    <a href="https://example.com" target="_blank">別サイトのページ</a>
   　　<a href="about.html">同一サイトのページ</a> 
    <a href="#section-heading-three">h3に飛ぶリンク</a> 
...

...
    <h1>見出し1</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error quaerat, cumque praesentium voluptate saepe distinctio rerum quam dolore alias inventore dicta maiores totam esse sunt molestias eum earum sed laudantium facere aliquam accusamus accusantium dolores sint? Amet minima eligendi ea libero. Nisi recusandae, necessitatibus qui deleniti vitae ad consectetur aliquid modi reiciendis! Ipsam ipsum nostrum repudiandae, enim dolore expedita voluptate commodi ducimus eligendi reprehenderit modi in quasi impedit odio, suscipit unde fugit excepturi laborum vitae. Fuga distinctio itaque dolore incidunt totam consequuntur aliquid, quae nobis vel eius minus modi ab asperiores, cumque eligendi eaque magnam inventore, iste quod aperiam! Tempora natus atque repudiandae saepe! Animi similique architecto eligendi sit molestias voluptate? Molestiae culpa error at impedit, laborum in consequuntur reiciendis obcaecati dolorum labore adipisci? Quaerat ratione aut pariatur. Magni ullam sed est soluta. Minima rerum corporis tenetur necessitatibus in expedita sapiente odio omnis excepturi magni nemo fuga, impedit cumque adipisci animi commodi, nam dolorum vero eius aut provident labore reprehenderit dolores. Libero esse maiores, itaque aliquid, minus cupiditate maxime dolore quisquam laudantium sed fugit sunt ratione dolorem error! Quos, eius ut enim voluptatum, repellat odit omnis accusamus cum commodi vel expedita at alias exercitationem quidem hic obcaecati harum mollitia.
    </p>
    <h2>見出し2</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error quaerat, cumque praesentium voluptate saepe distinctio rerum quam dolore alias inventore dicta maiores totam esse sunt molestias eum earum sed laudantium facere aliquam accusamus accusantium dolores sint? Amet minima eligendi ea libero. Nisi recusandae, necessitatibus qui deleniti vitae ad consectetur aliquid modi reiciendis! Ipsam ipsum nostrum repudiandae, enim dolore expedita voluptate commodi ducimus eligendi reprehenderit modi in quasi impedit odio, suscipit unde fugit excepturi laborum vitae. Fuga distinctio itaque dolore incidunt totam consequuntur aliquid, quae nobis vel eius minus modi ab asperiores, cumque eligendi eaque magnam inventore, iste quod aperiam! Tempora natus atque repudiandae saepe! Animi similique architecto eligendi sit molestias voluptate? Molestiae culpa error at impedit, laborum in consequuntur reiciendis obcaecati dolorum labore adipisci? Quaerat ratione aut pariatur. Magni ullam sed est soluta. Minima rerum corporis tenetur necessitatibus in expedita sapiente odio omnis excepturi magni nemo fuga, impedit cumque adipisci animi commodi, nam dolorum vero eius aut provident labore reprehenderit dolores. Libero esse maiores, itaque aliquid, minus cupiditate maxime dolore quisquam laudantium sed fugit sunt ratione dolorem error! Quos, eius ut enim voluptatum, repellat odit omnis accusamus cum commodi vel expedita at alias exercitationem quidem hic obcaecati harum mollitia.
    </p>
    <h3 id="section-heading-three">見出し3</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error quaerat, cumque praesentium voluptate saepe distinctio rerum quam dolore alias inventore dicta maiores totam esse sunt molestias eum earum sed laudantium facere aliquam accusamus accusantium dolores sint? Amet minima eligendi ea libero. Nisi recusandae, necessitatibus qui deleniti vitae ad consectetur aliquid modi reiciendis! Ipsam ipsum nostrum repudiandae, enim dolore expedita voluptate commodi ducimus eligendi reprehenderit modi in quasi impedit odio, suscipit unde fugit excepturi laborum vitae. Fuga distinctio itaque dolore incidunt totam consequuntur aliquid, quae nobis vel eius minus modi ab asperiores, cumque eligendi eaque magnam inventore, iste quod aperiam! Tempora natus atque repudiandae saepe! Animi similique architecto eligendi sit molestias voluptate? Molestiae culpa error at impedit, laborum in consequuntur reiciendis obcaecati dolorum labore adipisci? Quaerat ratione aut pariatur. Magni ullam sed est soluta. Minima rerum corporis tenetur necessitatibus in expedita sapiente odio omnis excepturi magni nemo fuga, impedit cumque adipisci animi commodi, nam dolorum vero eius aut provident labore reprehenderit dolores. Libero esse maiores, itaque aliquid, minus cupiditate maxime dolore quisquam laudantium sed fugit sunt ratione dolorem error! Quos, eius ut enim voluptatum, repellat odit omnis accusamus cum commodi vel expedita at alias exercitationem quidem hic obcaecati harum mollitia.
    </p>
    <h4>見出し4</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error quaerat, cumque praesentium voluptate saepe distinctio rerum quam dolore alias inventore dicta maiores totam esse sunt molestias eum earum sed laudantium facere aliquam accusamus accusantium dolores sint? Amet minima eligendi ea libero. Nisi recusandae, necessitatibus qui deleniti vitae ad consectetur aliquid modi reiciendis! Ipsam ipsum nostrum repudiandae, enim dolore expedita voluptate commodi ducimus eligendi reprehenderit modi in quasi impedit odio, suscipit unde fugit excepturi laborum vitae. Fuga distinctio itaque dolore incidunt totam consequuntur aliquid, quae nobis vel eius minus modi ab asperiores, cumque eligendi eaque magnam inventore, iste quod aperiam! Tempora natus atque repudiandae saepe! Animi similique architecto eligendi sit molestias voluptate? Molestiae culpa error at impedit, laborum in consequuntur reiciendis obcaecati dolorum labore adipisci? Quaerat ratione aut pariatur. Magni ullam sed est soluta. Minima rerum corporis tenetur necessitatibus in expedita sapiente odio omnis excepturi magni nemo fuga, impedit cumque adipisci animi commodi, nam dolorum vero eius aut provident labore reprehenderit dolores. Libero esse maiores, itaque aliquid, minus cupiditate maxime dolore quisquam laudantium sed fugit sunt ratione dolorem error! Quos, eius ut enim voluptatum, repellat odit omnis accusamus cum commodi vel expedita at alias exercitationem quidem hic obcaecati harum mollitia.
    </p>
    <h5>見出し5</h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error quaerat, cumque praesentium voluptate saepe distinctio rerum quam dolore alias inventore dicta maiores totam esse sunt molestias eum earum sed laudantium facere aliquam accusamus accusantium dolores sint? Amet minima eligendi ea libero. Nisi recusandae, necessitatibus qui deleniti vitae ad consectetur aliquid modi reiciendis! Ipsam ipsum nostrum repudiandae, enim dolore expedita voluptate commodi ducimus eligendi reprehenderit modi in quasi impedit odio, suscipit unde fugit excepturi laborum vitae. Fuga distinctio itaque dolore incidunt totam consequuntur aliquid, quae nobis vel eius minus modi ab asperiores, cumque eligendi eaque magnam inventore, iste quod aperiam! Tempora natus atque repudiandae saepe! Animi similique architecto eligendi sit molestias voluptate? Molestiae culpa error at impedit, laborum in consequuntur reiciendis obcaecati dolorum labore adipisci? Quaerat ratione aut pariatur. Magni ullam sed est soluta. Minima rerum corporis tenetur necessitatibus in expedita sapiente odio omnis excepturi magni nemo fuga, impedit cumque adipisci animi commodi, nam dolorum vero eius aut provident labore reprehenderit dolores. Libero esse maiores, itaque aliquid, minus cupiditate maxime dolore quisquam laudantium sed fugit sunt ratione dolorem error! Quos, eius ut enim voluptatum, repellat odit omnis accusamus cum commodi vel expedita at alias exercitationem quidem hic obcaecati harum mollitia.
    </p>
    <h6>見出し6</h6>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error quaerat, cumque praesentium voluptate saepe distinctio rerum quam dolore alias inventore dicta maiores totam esse sunt molestias eum earum sed laudantium facere aliquam accusamus accusantium dolores sint? Amet minima eligendi ea libero. Nisi recusandae, necessitatibus qui deleniti vitae ad consectetur aliquid modi reiciendis! Ipsam ipsum nostrum repudiandae, enim dolore expedita voluptate commodi ducimus eligendi reprehenderit modi in quasi impedit odio, suscipit unde fugit excepturi laborum vitae. Fuga distinctio itaque dolore incidunt totam consequuntur aliquid, quae nobis vel eius minus modi ab asperiores, cumque eligendi eaque magnam inventore, iste quod aperiam! Tempora natus atque repudiandae saepe! Animi similique architecto eligendi sit molestias voluptate? Molestiae culpa error at impedit, laborum in consequuntur reiciendis obcaecati dolorum labore adipisci? Quaerat ratione aut pariatur. Magni ullam sed est soluta. Minima rerum corporis tenetur necessitatibus in expedita sapiente odio omnis excepturi magni nemo fuga, impedit cumque adipisci animi commodi, nam dolorum vero eius aut provident labore reprehenderit dolores. Libero esse maiores, itaque aliquid, minus cupiditate maxime dolore quisquam laudantium sed fugit sunt ratione dolorem error! Quos, eius ut enim voluptatum, repellat odit omnis accusamus cum commodi vel expedita at alias exercitationem quidem hic obcaecati harum mollitia.
    </p>
...
上記記述後、ブラウザにてリンクをクリックすると、対象の部分にジャンプするかと思います。 ## imgタグ 先ほど紹介した**imgタグ**です。 **alt属性**に関しての補足ですが、こちらを記載すると、検索エンジンが画像内容を認識する手助けになり、**SEO対策**になりますし、ブラウザで音声読み上げ機能をする際に読み上げてくれるので、**アクセシビリティ**(老若男女、障害を持つ人、誰でも使えるかどうか)を考慮して、記載するようにしましょう。 
... 
    <p>
      <strong>HTML</strong>
      を勉強中
    </p>
    <img src="images/sample.jpg" alt="東茶屋街の街並み" />
    <a href="https://example.com" target="_blank">別サイトのページ</a>
...
## videoタグ 動画を埋め込みたい場合は、**videoタグ**を使用します。 その前に、`html_and_css`ディレクトリに`videos`ディレクトリを作成しましょう。 その中に、以下の動画をダウンロードして、格納しましょう。 {% file src="" %} 格納後、以下の記述を追加しましょう。こちらもimgタグと同様に、**src属性**を相対パス、絶対パスで指定できます。 
...
    <a href="about.html"">同一サイトのページ</a>
    <a href="#section-heading-three">h3に飛ぶリンク</a> 
    <video　src="videos/sample-video.mp4"></video>
...
記述後、ブラウザで確認すると、画像のみ表示されているかと思います。 表示されていない人に関しては、もしかするとブラウザが対応していないことがあります。 そういった人のために、タグの中に文章を記載すると、動画が表示されない人にそのテキストが表示されるようになります。こちらも基本的に記述するようにしましょう。 {% code title="index.html◎" %} ```html ... 同一サイトのページ h3に飛ぶリンク あなたのブラウザは、このビデオを再生できません ... ``` {% endcode %} 動画を再生するには、**controls属性**を追加します。 こちらは属性のみを記述していると思うのですが、**オンかオフかの選択肢が二つしかない属性**に関しては（今回の場合コントロールバーを表示するか、しないか）、**属性名**のみ記述します。 
...
    <a href="about.html"">同一サイトのページ</a>
    <a href="#section-heading-three">h3に飛ぶリンク</a> 
    <video controls　src="videos/sample-video.mp4">
        あなたのブラウザは、このビデオを再生できません
    </video>
...
上記の記述にて、動画の再生や音量調整、画面調整などの設定ができるようになったかと思います。 また、**autoplay属性**を追加すると、ページを開いた段階で自動再生されるようになり、**loop属性**を追加すると、動画がループするようになります。これらの属性に関しても、オンかオフかの二つなので、属性名のみになります。 
...
    <a href="about.html"">同一サイトのページ</a>
    <a href="#section-heading-three">h3に飛ぶリンク</a> 
    <video controls autoplay loop　src="videos/sample-video.mp4">
        あなたのブラウザは、このビデオを再生できません
    </video>
...
## ulタグ、olタグ、dlタグ リストを作りたい場合は、**ulタグ**、**olタグ、dlタグ**を使いましょう。 まず**ulタグ**は、**unorder list(順序のないリスト)**の頭文字で、特にホームページのナビゲーション等に使用することが多いかと思います。
以下の記述を追加しましょう。 **ulタグ**の中に、**li(list item)タグ**を記述します。 
...
    <video controls autoplay loop src="videos/sample-video.mp4"></video>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
...
ブラウザで確認すると、以下のようにリストが確認できるかと思います。
また、ulタグの中に、さらにulタグを入れると、 
...    
    <ul>
      <li>HTML</li>
      <ul>
        <li>HTMLとは？</li>
        <li>headタグ</li>
        <li>bodyタグ</li>
      </ul>
      <li>CSS</li>
    </ul>
...
以下のようなリストが確認できます。 ![](https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FMnyLnQXWJ3aSKqi787IV%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-22%2011.55.17.png?alt=media\&token=50eb3c7b-6e7e-468d-92b0-920877c07ab8) 次に**olタグ**を使いましょう。 **olタグ**は、**order list(順序のあるリスト)**の頭文字になります。 以下の記述を追加しましょう。 
...
      <li>CSS</li>
    </ul>
    <ol>
      <li>HTMLを勉強する</li>
      <li>CSSを勉強する</li>
      <li>ホームページを作る</li>
    </ol>
    <h1>見出し1</h1>
...
ブラウザで確認すると、以下のような数字付きのリストが確認できるかと思います。
最後に**dlタグ**です。 **dlタグ**は**definition list(定義リスト)**の頭文字で、用語と用語の説明のリストを作る際に使用します。 **dlタグ**の中に**dt(definition title)タグ**と、**dd(definition detail)タグ**をセットで記述します。 
...
    <ol>
      <li>HTMLを勉強する</li>
      <li>CSSを勉強する</li>
      <li>ホームページを作る</li>
    </ol>
    <dl>
      <dt>HTML</dt>
      <dd>ページの構造を定義</dd>
      <dt>CSS</dt>
      <dd>ページのレイアウトを定義</dd>
    </dl>
...
上記を記述すると、ブラウザで以下のように確認できるかと思います。
## tableタグ 表を埋め込みたい場合は、**tableタグ**を使います。 **tableタグ**の中には、まず**tr(table row)タグ**を使います。 **trタグ**は表の行を表します。 **trタグ**の中には、**td(table data)タグを使います。** **tdタグ**は表のデータを表します。 行を複数にしたい場合は、**trタグ**を複数記述します。 
...
      <dd>ページのレイアウトを定義</dd>
    </dl>
    <table>
      <tr>
        <td>りんご</td>
        <td>100円</td>
      </tr>
      <tr>
        <td>みかん</td>
        <td>100円</td>
      </tr>
    </table>
...
表にヘッダーをつけたい場合は、tdタグではなく、**th(table header)タグ**を使います。 
...
      <dd>ページのレイアウトを定義</dd>
    </dl>
    <table>
      <tr>
        <th>商品</th>
        <th>値段</th>
      </tr>
      <tr>
        <td>りんご</td>
        <td>100円</td>
      </tr>
      <tr>
        <td>みかん</td>
        <td>100円</td>
      </tr>
    </table>
...
上記のように記述しましたが、tableタグを利用する際は、 表のヘッダー部分とデータ部分をグループ化することが推奨されており、 **theadタグ**と、**tbodyタグ**を使用して、対象のtrタグ部分を括りましょう。 
...
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>値段</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>りんご</td>
          <td>100円</td>
        </tr>
        <tr>
          <td>みかん</td>
          <td>100円</td>
        </tr>
      </tbody>
    </table>
...
## divタグ 特定のコンテンツをグループ化する際には、**div(division)タグ**を使います。 実務では以下のように、各コンテンツに応じてclass名をつけて、各コンテンツにcssを当てています。 
...
        </tr>
      </tbody>
    </table>
    <div class="introduce">
      <p>サンプル太郎です。よろしくお願いします！</p>
    </div>
    <div class="skill">
      <p>html cssを勉強中</p>
    </div>
...
ただ、特定の意味を持つコンテンツに関しては、**セマンティックな要素（headerタグ、mainタグ、footerタグ等）**をできる限り使いましょう。 以下記事が参考になるかと思います。 ブラウザ上の見た目は変化しないですが、こちらも**SEO対策**となります。