HTMLの色んなタグをサンプルコードを交えながら紹介

このページでは、他のページでは紹介してなかったHTMLタグについて具体的な書き方を交えながら解説します。

<h1>～<h6>
コンテンツの見出しを入力するタグで、<h1>から順に使うのが一般的です。
<h1>は主にホームページやブログなどのタイトルによく使われており、h2は記事中の見出しに使われています。

使用例
<h1>ここに記事の見出しを入力する</h1>

<br>
改行を入力するためのタグです。
ホームページ作成ソフトや無料ブログサービス、サイト作成システムによっては、Wordのように文末でEnterキーを押すだけで自動的にHTMLファイルに<br>が入力されてブラウザで見ても改行されているものもあります。

逆に、私が紹介している方法のようにテキストエディタで自力でタグを入力して作成する方法の場合は、Enterキーを押すだけではテキストエディタ上は改行されますが、そのHTMLファイルをブラウザで見ると改行されていないので（それだけでは改行されない仕様なので）、その都度段落ごとに<br>を入力する必要があります。

<img>
画像を表示されるためのタグです。
src属性に表示させたい画像のファイル名を書き、alt属性には、検索エンジンに「その画像が何であるか」を端的に示す説明を書くという使い方をします。

次の例では、「flower.jpg」というファイル名の画像を指定し、alt属性に「花の写真」という説明を指定しています。

使用例
<img src="flower.jpg" alt="花の写真">

上のタグを書いたHTMLファイルと同じフォルダ内に「flower.jpg」という画像を置いた状態で、HTMLファイルをブラウザで表示させると画像が表示されます。

使用例
<link rel="stylesheet" href="sample.css">

上のタグを書いたHTMLファイルと同じフォルダ内にCSSファイルを作成した状態で、HTMLファイルをブラウザで表示させるとCSSが適用されます。

HTMLファイルとCSSの作成方法はこちらとこちらのページをご覧ください。

<a>
ホームページやブログなどで青い文字で「詳細はこちら」といった部分をクリックすると、別のページが表示されると思います。
こういった仕組みを「リンク」と言いますが、リンクを作成するためのタグです。

次のコードでは「sample2のページに移動」をクリックすると、sample2のページが表示されます。
（同じフォルダに「sample2.html」というHTMLファイルを作成している場合です。
今回は作成していませんので、クリックしてもエラーになります。）
使用例
<a href="sample2.html">sample2のページに移動</a>

また、href="sample2.html"の後に、半角スペースを１個だけ入れて、「target="_blank"」と書くと別のタブで「sample2」のページが表示されます。
<a href="sample2.html" target="_blank">sample2のページに移動</a>

<div>
複数のタグを１つのグループとして扱いたい場合に使用するタグです。

使用例
<div>
<p>段落１</p>
<p>段落２</p>
</div>
<p>段落３</p>

上記では、<p>段落１</p>と<p>段落２</p>を<div>で囲むことによってグループ化されています。
こうすることにより、例えばCSSに

div{color:red;}

と書くと、<p>段落１</p>と<p>段落２</p>の文字だけを一度にまとめて赤色にできます。
（<p>段落３</p>はdivタグの外側にあるので赤色にはなりません）

CSSの書き方はこちらのページをご覧ください。

<span>
特定のタグや、pタグで囲まれた段落内の特定の文字だけにCSSを適用させたい場合などに使用します。
上記で挙げたdivタグとの違いは、spanタグの場合は複数のタグではなくある単一のタグ内の特定の文字などに使用されるという点です。
次のコードではpタグ内の文字の中でも「マークアップ言語」の部分だけ囲っています。

使用例
<p>HTMLは<span>マークアップ言語</span>の一種です</p>

こちらに対して、例えばCSSに

span{color:red;}

と書くと、<span>マークアップ言語</span>の文字だけを一度にまとめて赤色にできます。
（「HTMLは」と「の一種です」はspanタグの外側にあるので赤色にはなりません）

CSSの書き方はこちらのページをご覧ください。

<li>
liはリストの略で、箇条書きを作れます。
下記のように<ol>や<ul>と組み合わせて使います。

<ol>と<ul>の違いは下記に紹介します。

<ol>
順序のある箇条書きを作るためのタグです。
数字やアルファベットで自動的に順序が付けられます。

例えば、私のおススメの果物が１番目が「ポポー」、２番目が「チェリモヤ」、３番目が「ランブータン」だったとします。
それを下記のように書いたとします。

<ol>ポポー</ol>
<ol>チェリモヤ</ol>
<ol>ランブータン</ol>

と書くと、

1ポポー
2チェリモヤ
3ランブータン

と表示されます。

数字の部分は自分で入力しなくても自動で割り振られます。

CSSで数字の部分をアルファベットの大文字や小文字や、ローマ数字に替えたりする方法もあります。

もちろん、<ol>の個数を増やすと、それに応じで順に番号が割り振られます。

確かに下記のように「1、2、3」の部分はキーボードから直接入力して、<p>で囲めば見た目的には同じように見えますが、

1ポポー
2チェリモヤ
3ランブータン

グーグルなどの検索エンジンに「この部分は箇条書きだな」と認識させるためには<ol>や<ul>を使うことが推奨されています。

<ul>
<ol>と違い、順序のない箇条書きに使います。
こちらもブラウザで見ると自動で「・」のような点が付けられます。

<dl>
用語の説明に使います。
<dl>の中に<dt>、<dd>を入れて使うことが一般的です。

書き方の具体例は次の通りです。

<dl>
<dt>ここに説明したい用語を書く</dt>
<dd>ここにその説明を書く</dd>
</dl>

<dl>
<dt>HTML</dt>
<dd>ホームページなどのWebページ作成に必要なマークアップ言語の一種です</dd>
</dl>

<hr>
水平線を表示するものです。

次のコードでは「ドリアンは・・・」の行と「販売されている・・・」の行の間に水平線が表示されます。

使用例
<p>ドリアンは熱帯フルーツの一種です</p>
<hr>
<p>販売されている果実は主に、タイ産、ベトナム産、マレーシア産、インドネシア産などが多いです</p>

<strong>
HTMLはマークアップ言語の一種です。
という文章があったとして、「マークアップ言語」の部分を重要語句としてサイトの読者に注目させたり、検索エンジンに認識させたい場合は、

<p>HTMLは<strong>マークアップ言語</strong>の一種です。</p>

といった書き方ができます。

見た目的には、Wordの文字を太字にする機能「画面上の「フォント」の項目にあるBのマークのボタン」で太字にしたような感じになります。

ただ、文字を太字にする目的で使うものではありません。
太字にしたい場合はCSSの「font-weigt:bold」を使います。
（詳しくはCSSのページで紹介します）

<table>
Excelで作成できるような表を作るためのタグです。
一般的には後述する<th>、<tbody>、<tfoot>、<tr>、<td>といった表関連のタグと組み合わせて使うことが多いです。

使用例
<table>
ここに<th>、<tbody>、<tfoot>、<tr>、<td>などを書く。
</table>

<tr>
行を表すタグです。
一般的には<tr>タグの中に<td>タグや<th>タグなどを書きます。>
次のように<tr>タグの中に、<td>タグを書くと、１行１列が表示されます。
また、<td>タグの中の「項目」という文字が表示されます。
<td>タグは、表の中の項目を表示させるタグです。

上記と内容的に同じですが、次ように書くこともできます。

しかし、少し見にくいので当サイトでは上記のように書きます。
<table><tr><td></td></tr></table>

次のように書くと、１行２列が表示されます。
<tr>タグの中に<td>タグが２つあります。

同じ行に、表示させたい列の数だけ<tr>タグを書くのがポイントです。
３列にしたければ、

<table>
<tr>
<td>ミント</td>
<td>バジル</td>
<td>ローズマリー</td>
</tr>
</table>

といった感じです。

列の増やし方を見ていきましょう。
列の増やし方も上記と同様です。

<table>
<tr>
<td>ミント</td>
<td>バジル</td>
<td>ローズマリー</td>
</tr>
<tr>
<td>50円</td>
<td>100円</td>
<td>150円</td>
</tr>
</table>

<td>ミント</td>
<td>バジル</td>
<td>ローズマリー</td>

を囲んでいる<tr>タグの下にもう１個、
<td>50円</td>
<td>100円</td>
<td>150円</td>

を囲んでいる<tr>タグを追加しました。

上記のコードをブラウザで確認すると、
ミント　50円
バジル　100円
ローズマリー　150円
のように表示されたと思います。

<th>
表の見出しを表すタグです。
上記のコードを使って使用例を示します。

使用例
<table>
<tr>
<th>ハーブ一覧</th>
<td>ミント</td>
<td>バジル</td>
<td>ローズマリー</td>
</tr>
<tr>
<th>価格</th>
<td>50円</td>
<td>100円</td>
<td>150円</td>
</tr>
</table>

<th>ハーブ一覧</th>と、<th>価格</th>が<th>タグを使った見出しです。

colspan属性
colspanはタグではなく、属性です。
このタグはある項目と隣接する項目を、任意の個数を指定して横方向に連結するために使います。
こちらも上記のコードを使って使用例を示します。

仮にミントが売り切れて、
<td>50円</td>の項目を、<td>ミント</td>と１つにくっつけて、「ミントは売り切れです」と表示させたいとします。

そうした場合、次のように書きます。

<table>
<tr>
<th>ハーブ一覧</th>
<td colspan="2">ミントは売り切れです</td>
<td>バジル</td>
<td>ローズマリー</td>
</tr>
<tr>
<th>価格</th>
<td>100円</td>
<td>150円</td>
</tr>
</table>

上記のコードを見ると<td>ミント</td>だった部分が<td colspan="2">ミントは売り切れです</td>に変わり、<td>50円</td>が消えているのが分かると思います。

ブラウザで確認すると、「ミントは売り切れです」の行だけ１列になったのが確認できます。

<td colspan="2">と書くことによって、この<td>タグと横方向に隣接する１つの項目を連結させるという意味になります。

同様に、<td colspan="3">と書けば、この<td>タグと横方向に隣接する２つの項目を連結させるという意味になります。

<table>
<tr>
<th>ハーブ一覧</th>
<td colspan="3">ミントは売り切れです</td>
<td>バジル</td>
<td>ローズマリー</td>
</tr>
<tr>
<th>価格</th>
<td>100円</td>
<td>150円</td>
</tr>
<tr>
<th>使い方</th>
<td>パスタ</td>
<td>肉や魚料理の香り付け</td>
</tr>
</table>

rowspan
rowspanもタグではなく、属性です。
このタグはある項目と隣接する項目を、任意の個数を指定して縦方向に連結するために使います。
colspanは横方向、rowspanは縦方向に連結するという違いがあります。
こちらも上記のコードを使って使用例を示します。

<td>ミント</td>の項目を、<td>バジル</td>と１つにくっつけて「ミントとバジル」と表示させるには次のように書きます。

<table>
<tr>
<th>ハーブ一覧</th>
<td rowspan="2">ミントとバジル</td>
<td>ローズマリー</td>
</tr>
<tr>
<th>価格</th>
<td>50円</td>
<td>100円</td>
<td>150円</td>
</tr>
<tr>
<th>使い方</th>
<td>パスタ</td>
<td>肉や魚料理の香り付け</td>
</tr>
</table>

<td>バジル</td>の項目を消して、<td>ミント</td>だった部分を<td>ミントとバジル</td>に変更したのが分かると思います。

ブラウザで確認すると、「ミントとバジル」の列だけ１行になったのが確認できます。

<td rowspan="3">と書くことによって、この<td>タグと縦方向に隣接する１つの項目を連結させるという意味になります。

同様に、<td rowspan="3">と書けばこの<td>タグと縦方向に隣接する２つの項目を連結させるという意味になります。

<table>
<tr>
<th>ハーブ一覧</th>
<td rowspan="3">ミントとバジルとローズマリー</td>
</tr>
<tr>
<th>価格</th>
<td>50円</td>
<td>100円</td>
<td>150円</td>
</tr>
<tr>
<th>使い方</th>
<td>ハーブティー</td>
<td>パスタ</td>
<td>肉や魚料理の香り付け</td>
</tr>
</table>

<pre>
後述するcodeタグを囲むために使います。

使用例
<pre>
ここにcodeタグを書き、その中にプログラムのソースコードを書きます。
</pre>

<code>
codeタグで囲った部分は、検索エンジンにプログラムのソースコードであることを認識させれます。
HTMLやCSSはプログラミング言語ではないのですが、ソースコードではあるのでHTMLやCSSのコードをホームページなどに掲載する場合はこちらのタグを使用すると良いでしょう。

使用例
<pre>
<code>
ここにプログラムのソースコードを書きます。
</code>
</pre>

次のコードではcodeタグの中にhtmlのソースコードを書いています。

<pre>
<code>
<!doctype html>
<head>
<html lang="ja">
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<p>Hello,World</p>
</body>
</html>
</code>
</pre>

<input>
問い合わせフォームなどでよく見かける入力欄、カレンダー、ボタンなどを作成できるタグです。
type属性の指定する値によって、作成できるものが変わります。
type属性に指定できる主な値を次に挙げます。

使用例
１行のテキストボックス（文字の入力欄）を作成できます。
<input type="text">

チェックボックスを作成できます。
クリックするとレ印が表示されるものです。
<input type="checkbox">

ラジオボタンを作成できます。
グループ化された複数のラジオボタンの中からどれか１つできない仕組みになっています。
<input type="radio">

カレンダーを作成できます。
<input type="date">

色の選択ウィンドウを作成できます。
<input type="color">

送信ボタンを作成できます。
value="送信"のように、value属性に指定した文字がボタン上に表示されます。
<input type="submit" value="送信">

取り消しボタン（リセットボタン）を作成できます。
上記と同様、value="取り消し"のように、value属性に指定した文字がボタン上に表示されます。
<input type="reset" value="取り消し">

指定できる値としては他にも色んなものがありますので、興味のある方は「inputタグ type属性」などで調べてみて下さい。

<textarea>
上記で挙げた<input type="text">とは違い、複数行の文章を入力できる入力欄を表示させれます。