主要なHTMLタグの一覧と意味と使い方をまとめて紹介します。

2018/8/21 ウェブ開発

みなさん、こんにちは！

ブリュの公式ブログ.netにお越しいただきまして、ありがとうございます。

このサイトでは、ITについて特化したサイトを運営しています。

このページでは、主要なHTMLタグについて、その意味と使い方を一覧にまとめました。

HTML作成時にハンドブック的な用途でお使いください。

すぐ下に目的のタグまでジャンプできる目次を設置しているので、どうぞご利用ください。

スポンサーリンク

<html>

<html>の使い方は、下にあるソースコードのように、<html>～</html>で囲んだ範囲内にHTMLコードを記述します。

<html>はHTMLの始まりと終わりを記述するためのタグであり、何か深い意味があるわけでもありません。

ですが、<html>タグがないと動作しない。

そこにいても気にならないけど、いないとそれはそれで困るタグです。

<head>

<head>タグは、HTMLコードのヘッダに位置するタグです。

<head>～</head>の間に、ブラウザには表示しないけど、ブラウザに表示される前に読み込みたいコードを書き込みます。

一般的には、<head>～</head>の中に、後述の<meta>によってサイトの設定を行ったり、<title>を使ってページのタイトルを設定したり、<link>を使ってスタイルシート（CSSファイル）を読み込んだります。

<meta>

<meta>は、サイトの様々な設定を行うタグです。

<head>～</head>の中に記述します。

<head>～</head>の内容は、次のようになっています。

たくさんの<meta>が使われていますね。

ここで、<meta>のそれぞれの意味について説明しましょう。

まずは1つめです。

これは、viewportと言って、レスポンシブウェブデザインを採用しているときに記述する<meta>タグです。

viewportは、ブラウザに対して、「あなたの画面サイズに合わせた最適なデザインを採用していますよ。」ということを伝えています。

だから、「ちゃんとデザイン通りに表示してね。」ということを伝えています。

もしもこのviewportを書いてなかったら、スマホでアクセスしたときに、パソコン表示の画面が圧縮されたものが表示されます。

レスポンシブデザインってなんだ？という方は、このviewportを「記述せずに」とりあえず読み飛ばして下さい。

ブラウザ上での表示はとりあえず可能です。

次の<meta>タグを見ていきます。

ここでは、文字コードの指定を行います。

この文字コードの指定がないと、文字化けが起こります。

htmlファイルを保存するときに、「文字コードを指定して保存」で選択した文字コードと同じものを設定してください。

なお、おすすめはUTF-8です。

サーバーはUTF-8と相性がいいので、バグが少ないです。

次のタグを見ていきましょう。

このタグは、その文書のデフォルトのスタイルシート言語とスクリプト言語を指定します。

これはおまじないです。

バグをなくすために記述しておきましょう。

次のコードを見ていきます。

descriptionとkeywordを指定します。

descriptionは、サイトの概要について記述します。

検索結果に出てくる、サイトタイトルの下の部分がdescriptionの内容です。

ただし、googleによって最適化が行われているため、必ずしもdescription通りに表示されるとは限りません。

keywordは、コンマ区切りで、キーワードを指定します。

なお、googleでは、検索エンジンのランキング判定に、keywordタグを無視すると表明しています。

でも、念のために記述しておきましょう。

<link>

次に、<link>タグについて説明します。

<link>タグは、HTMLファイルとの関連するファイルを指定するときに使用します。

初めのうちは、外部のスタイルシート（CSSファイル）を読み込むときに使用します。

style.cssの部分に、関係するCSSのリンクを張ります。

サンプルコードのように、htmlからの相対パスで記述することもできるし、http://から始まるフルパスで記述もできます。

フルパスで記述する例が次のものにです。

example.comは、ご自身のドメインに変更してください。

<title>

<title>タグは、そのページのタイトルを記述します。

<title>タグについて、これ以上の説明は特に不要でしょう。

<body>

<body>タグは、ブラウザに表示する部分を記述するタグです。

<body>～</body>に記述します。

一般的には、<head>タグの下に記述します。

HTML全体の構成としては、次のコードをご覧ください。

Bodyタグに記述するだけでは、単なるテキストしか表示されませんので、後述の<div>タグなどを用いてデザイン性を追加していきます。

ここで重要なのが、<body>～</body>に記述した内容が、ブラウザに表示されることです。

<div>

<div>タグは、ブラウザ表における枠を表すと考えてください。

<div>～</div>で囲まれた部分が、見えない枠で囲まれます。

特にCSSで記述しなかった場合、横幅は親要素に対して100%の幅になり、高さは<div>～</div>の内容で自動的に調節されます。

<div>～</div>の中に、<div>を入れ込むすることも可能で、例えば2カラムのデザインは、次のHTMLコードとCSSコードで記述できます。

・HTMLコード

・CSSコード

 

大事なことは、必ず<div>に対する</div>が関係すること。

開始タグと終了タグの関係は、次のコードのように1：1の関係になっています。

対応する<div>と</div>を同じ番号で印をつけてみました。

この対応関係を間違えると、デザインが崩れますので注意してください。

<p>

<p>タグは、段落を表すHTMLタグです。

上のコードで示したように、<p>～</p>で1段落を構成します。

また、<p>タグは、<div>～</div>の中に記述します。

<div>は、文章を書く枠を示し、<p>は、文章中の段落を示すからです。

<p>より<div>の方が強いと考えておいてください。

NGな使い方を下に示します。

<p>～</p>を、<div>～</div>の中に収めてください。

<br>

<br>タグは、改行を表すタグです。

サンプルのHTMLコードを示します。

注意点として、<br>タグは「改行」を表します。

稀にデザイン的なスペース欲しさに<br>タグを連続使用しているものを見ますが、そういう使い方はダメです。

<br>はあくまで改行であり、デザインに使うタグではありません。

デザイン上のスペースは、CSSで指定してください。

<span>

<span>タグは、このタグ自身が何か文字に作用を与えることはありません。

特定の文字列に、何かしらのデザインを追加したいときに使用します。

例えば、時の色を変えたいとか、文字の大きさを変えたいとか、アンダーラインを引きたいとか。

基本的に、CSSとセットで使われます。

上の例では、一行目の文字は「この部分だけ」というところが24px;で表示されます。

2行目では、「この部分だけ」というところが、赤字で表示されます。

このように、文字列中の特定の個所のデザインを変更したいときに、その部分を<span>～</span>で囲み、スタイル―トと組み合わせることで、デザインの変更が可能になります。

<font>

<font>は、文字サイズの変更や文字の色を変更するタグです。

<span>タグと使い方は似ています。

以下のHTMLコードを、手持ちのHTMLコードの<body>～</body>に貼り付けて、ブラウザで表示してみてください。

このように、文字のデザインを変更したい部分を<font>～</font>で囲みます。

ただし、現在のHTMLでは、この<font>タグは推奨されていません。

今後縮小していき、いずれはサポートされなくなるタグなので、使用はお勧めできません。

<font>タグによるデザインの変更は、<span>タグとスタイルシートの組み合わせで可能です。

<a>

<a>タグは、リンクを張り付けるタグです。

使い方は次の通りになっています。

hres=””の部分に、リンクさせたいURLを記入します。

リンクの貼り方には3種類あり、「絶対パス」、「相対パス」、「プロトコル相対URL」などがあります。

当サイト、ブリュの公式ブログ.net（for IT）では、内部リンク（自分のサイト内でのリンク）には、「プロトコル相対URL」をお勧めします。

将来的にSSL通信を実施すると時に、絶対パスで記述していた場合には、すべてhttpをhttpsに変更する必要があります。

これが結構な手間だし、いろいろと危険性も持っています。

プロトコル相対URLであれば、httpでも、httpsでも通信できるため、サーバーに独自SSLを導入するだけでSSL化対応ができ、非常に便利なものになっています。

相対URLの場合には、プロトコル相対URLと同じように、http通信でも、https通信でも利用できるのですが、ファイルの位置変更があった場合の書き換えがかなり面倒で、サイト運営時の手間が増えます。

相対URLでは、htmlに記述する文字が少なくなることから、若干であっても読み込み速度が速くなる可能性はありますが、それもわずかでありほとんどメリットがありません。

管理の煩雑性を考えると、内部リンクに関してはプロトコル相対URLが便利でしょう。

なお、外部リンク（自サイト以外へのリンク）に関しては、httpまたはhttpsから始まるURLをフルで記入しましょう。

<img>

<img>タグは、画像を挿入するタグです。

ご自身のHTMLコードの<body>～</body>の間に、次のコードを記述してください。

その後、HTMLを保存した同じ階層にimgフォルダを作成し、その中にsample.jpgというサンプル画像を保存してください。

保存したHTMLファイルを開くと、sample画像が表示されます。

styleの部分で画像のサイズを変更できます。

基本的には%表記がお勧めです。

もしもpxで表記していた場合、画像の親要素のサイズを超えていると、レイアウトが崩れます。

100%以下の値で大きさを指定していれば、基本的にレイアウト崩れは起こりにくいです※。

また、heightにはautoを指定しています。

横幅に対して、高さは自動で設定するという意味なので、通常であればheightはautoで十分でしょう。

alt属性には、画像の説明を記入します。

このalt属性の内容は、通常はブラウザには表示されません。

ブラウザ上には通常は画像が表示されますが、万が一リンク切れや、通信エラーなどが生じて画像を取得できなかった時に、altの内容が表示され、どんな画像があったのかを閲覧者に伝えることができます。

※paggingを指定していた場合にはややこしいのですが、詳細はスタイルシートの記事で書きます。

<table>

<table>タグは、表を作成する時に使います。

<tr>～</tr>タグで行を作成し、<td>～</td>でセルを作成します。

サンプルは次のコードです。

画面上では、次のように表示されます。

セル1 セル2
セル3 セル4

HTMLのコメントアウト

プログラムは、作成した人にしか解読できないといわれることがあります。

多種多様な書き方があり、他の人が書いたコードは自分とは書き方が違うため、動作の理解が難しくなります。

また、開発者自身が、何の動作をしている部分なのかを忘れないために、「コメント」というものが存在します。

HTMLにおけるコメントアウトは、「<!–」と「–>」で囲んだ部分がコメントアウトされます。

例を見てみましょう。

これで、「この部分がヘッダー」とか、「この部分がサイドバー」といったようにわかりやすいコメントを設けることで、万が一レイアウト崩れが発生したときに、どの部分がおかしいのか見当をつけやすくなるため、HTML開発のスピードが大幅にアップします。

まとめ

以上が、代表的なHTMLタグの説明です。

このページは、サイト運営者にとってのハンドブック的な役割を持たせているので、今後役に立ちそうなタグがあれば、どんどん追加していく予定です。

気に入ったら、お気に入り登録よろしくお願いします。