前回、HTMLの基本ということで表示したい情報はタグを使って記述していく、というところまで学びました。
今回は、そのタグについて中でも頻出する特に覚えておきたいものを詳しく解説していきます。
HTMLのタグ
Pタグ
段落タグと呼ばれるもので、ブログ記事や当サイトでもよく使われています。
またpはパラグラフのpです。
ブラウザでの表示例をみてみましょう。
HTMLではどう書くかというと下記のようになります。
h1タグ(h2〜h6)
h1〜h6タグは見出しを作るためのものです。h1が1番大きく、数字が大きくなるほど小さい見出しになり、h6が一番小さくなります。
ブラウザ表示はこうなります
HTMLの記述は以下の通りです。
imgタグ
画像を貼り付けてブラウザに表示するためのタグです。
これは終了タグが存在しない(タグで囲わない)ので注意が必要です。
また表示可能な画像形式はjpg(jpeg)やpng、gifなどです。
ブラウザでの表示
HTMLの記述
ここでimgタグには様々な属性を書くことができます。
srcのダブルクォーテーションで囲った部分には画像ファイル名を記述します。
altのダブルクォーテーションで囲った部分には、もし画像ファイルが表示できなかった場合にここで記述した文字(代替テキスト)が画像の代わりに表示されます。
aタグ
リンクタグと呼ばれるもので、他ページへのリンクを貼ったりするのに使用します。
ブラウザ表示
HTML記述
aタグ内にあるhrefのダブルクォーテーションで囲った部分にはリンク先URLを記述します。こうすることでクリックされた際には該当urlへ飛びます。
改行タグ
文書を改行するためのタグです
ブラウザ表示
HTML
コメント
HTML文書内にコメントを記述することもできます。例えば自分用のメモ書きであったり自由に書くことができ、この記述はWEBページには表示されません。
ブラウザ
HTML
divタグ
特に意味を持たないタグですが、divで囲った部分をブロック要素としてまとめることができるタグです。
まとめることで指定した範囲にスタイルを適用したりすることができます。
ブラウザ表示
HTML
spanタグ
divタグと同じまとめるためのタグですが、divタグはブロック要素としてまとめますので改行が入りますがspanタグはインライン要素で文章の一部として利用されますので前後に改行は入りません。
ブラウザ
HTML
spanタグの使い方は文書の一部の文字色を変えたり線を引いたりするときに使います。
ブラウザ
HTML
いかがでしたでしょうか?
上記で紹介した他にも様々なタグが存在しますのでコーディングしブラウザ表示させてみながら覚えていければいいかなと思います。