はじめてのWEBサイト作成
HTML
CSS
JavaScript
HTMLでWEBサイトを作成する時によく使うタグの使い方について学習します。
必須のものから、あると便利なものまで、よく使うタグに厳選してご紹介します。
imgタグ
役割＆特徴
画面上にイラストや写真を表示する時に使用します。
srcに画像を保存してあるフォルダのパスと、画像のファイル名を記述します。
altに画像が表示されなかった時に、代わりに表示するテキストを記述します。
余談ですがPDFファイルは画像ではありません。
PDFファイルを表示したい場合は、imgタグではなくembedタグを使用します。
使用例
<img src="/public/img/logo.png" alt="ロゴ画像">
videoタグ
役割＆特徴
画面上で動画を再生する時に使用します。
srcに動画を保存してあるフォルダのパスと、動画のファイル名を記述します。
controlsを記述すると、再生や停止などをコントロールできるボタンが表示されます。
autoplayを記述すると、ページ表示時に自動的に再生されます。
loopを記述すると、動画を繰り返し再生するようになります。
使用例
<video src="/public/video/sample.mp4" controls autoplay loop></video>iframeタグ
役割＆特徴
おもにyoutubeの動画を再生する時や、googleマップを表示したい時に使用します。
コードはyoutubeやgoogle側で生成されるので、それをそのまま貼り付けましょう。
使用例
<iframe src="https://youtu.be/LfB0l7YpyKc?si=DayrgHt38tYkb1nY"></iframe>brタグ
役割＆特徴
テキストを改行します。
コンテンツ間の余白を取りたいからとbrタグを使用するかたがいます。
簡単ですが、それは本来の使用方法ではないです。
addressタグ
役割＆特徴
電話番号や住所などの連絡先情報をtableタグなどで作成する時が来ると思います。
その時にaddressタグで囲んであげると、いいことが起こるかもしれません。
使用例
<address>
<table>
<tbody>
<tr><th>電話番号</th><td>03-4567-8910</td></tr>
<tr><th>住所</th><td>東京都ハチ公前</td></tr>
</tbody>
</table>
</address>| 電話番号 | 03-4567-8910 |
|---|---|
| 住所 | 東京都ハチ公前 |
まとめ
以上、必須のものから、あると便利なものまで、よく使うタグに厳選してご紹介しました。
HTMLのタグはこの他にもたくさんあります。
全てを暗記して使い分けるのは困難です。
何か新しいコンテンツを作成する時に、これを作成するのに最適なタグってあるのかな？と考える癖をつけていただければと思います。