今回は、HTMLの開発をしていて、割と使うタグを5つ紹介したいと思います。
良く使うタグ5選(前半)は、こちらの記事で紹介しているので、良ければご覧ください。
また、これからHTML・CSSを勉強する方にとって、以下の本がとても分かりやすく初級者に対してもオススメです。
よくわかるHTML5 CSS3の教科書 第3版 / 大藤幹
【送料無料】 よくわかるHTML5 CSS3の教科書 第3版 / 大藤幹 【本】 価格:3,080円 |
良く使うHTMLタグ4選
- span
- img
- a
- br
1.spanタグ
1つ目は、spanタグです。
HTMLは、それぞれのタグが何かの略語だったりしますが、spanは略語ではないようです。
日本語に訳すと「〔両端の間の〕長さ、距離」と言う意味になります。
HTMLにおいては、文章のある一部分に特別な意味をつけたいときに囲います。
spanで囲っても画面上、何も変化は起きない、インライン要素ですが、何か文章に特殊なデザインをつけたいときなどにつけましょう。
例えば以下のような使い方です。
<p>
この記事は、<span style="font-size: 30px">HTML初心者向け</span>に書いています。
</p>
HTML化すると以下のようになります。
この記事は、HTML初心者向けに書いています。
文章中に、この部分だけデザインを変えたいと言う箇所があればspanタグを使いましょう。
2.imgタグ
2つ目は、imgタグです。
タグ名から想像できると思いますが、imgは、imageの略で画像を表示する時に使います。
実際には、以下のような使い方をします。
<img src="beach.png" alt="ビーチの画像" >
srcの属性は、ソース(source)を意味し、画像のソース(出どころ)のパスを指定します。
altの属性は、「alternate text」の略で、画像が表示されない時に代わりに表示するテキストです。
今でこそ、5Gや光回線などで超高速な通信が可能になりましたが、HTMLが誕生した初期の時代は通信速度も遅く、容量の重い画像は表示するまでに時間が掛かるということが多々ありました。
そのような時に画像が表示されるまでの間に代わりに表示する文言を出すことで、何もない空白ではなく、ここに時間が経てば、ここに画像が表示されるということを明示的にユーザーに知らせることができるのです。
3.aタグ
3つ目は、aタグです。
aタグは、Anchor(アンカー)の略で、リンク先のページを表すタグとなってます。
アンカーは、日本語に訳すと、船についている「錨(いかり)」を意味します。
なぜ、ページのリンクが、アンカーなのか調べてみると、ページとページをアンカーで繋ぎ止める役割という説明がありました。
イメージとしては、リンク元のページが、リンク先のページにいかりを刺してピン留めしているようなイメージでしょうか。
aタグは、以下のように使います。
<a href="https://hiro-engineer-blog.com/">hiroエンジニアのNote</a>
実際のHTMLにすると以下のようになります。
hiroエンジニアのNotehrefは「Hypertext Reference」の略です、HTML自体が、「Hypertext Markup Language」の略なので、そのリファレンス = つまりリンクの参照先のURLを指定しています。
ちなみに、aタグは「href=”https://xxxxx.com”」とのように指定して外部のページにも飛ばせますし、相対パスのように「href=”/contact”」のようにサイトの内部のパスも指定できます。
4.brタグ
最後は、brタグです。
brタグは、「break」の略で改行を意味します。
実際の使い方は以下の通りです。
<p>
このページではHTML初心者向けに記事を書いてます。
良く使うタグとして覚えるものは5つあります。<br>
詳細はこちらをご覧ください。
</p>
HTMLにすると以下のようになります。
このページではHTML初心者向けに記事を書いてます。
良く使うタグとして覚えるものは5つあります。
詳細はこちらをご覧ください。
気づいた方もいるかもしれませんが、1段目と2段目は、テキスト内では改行してますが、HTML上では改行されていません。
2段目の終わりにbrタグを入れたため、3段目は改行されているのが分かりますね。
このように、改行したい場合は、brタグを入れましょう。
HTMLをもっと勉強したい方へ
【送料無料】 よくわかるHTML5 CSS3の教科書 第3版 / 大藤幹 【本】 価格:3,080円 |
===============
以上、HTML入門ー良く使うタグ4選(後半)について紹介してみました。
この情報が皆さんの人生のお役に立てれば幸いです。
エンジニアとして日本のITリテラシーを高めていきたいと共感して頂いた人は、是非このブログの拡散とyoutubeの方も見ていただけると嬉しいです。
記事を最後まで見ていただきありがとうございました。
執筆者: hiroエンジニア