クイズで覚えるHTMLタグ

HTMLのタグがランダムで出題、楽しみながらHTMLタグを覚えられます。

HTMLの概要や、それぞれのHTMLタグの意味や使い方などは、後述の説明をご覧ください。

HTMLとは
HTMLのタグ名を覚えるコツ
実用的なHTML基本タグ｜暗記クイズ
おまけ：HTMLで表を作るためのタグ名の覚え方

HTMLとは

HTML（HyperText Markup Language）は、ウェブサイトを作成するときに使用する、最も基本的なコンピューター言語です。

HTMLの書き方はとてもシンプルです。「< >xxx</ >」のように、コンテンツ（xxx）をタグ（< >と</ >）で囲むことで、コンテンツを定義します。実際には、タグ内のスペースのところには、タグ名と呼ばれるアルファベットが入り、タグ名はあらかじめ決まっています。例えば、<p>xxx</p>と記述すると、xxxを段落として表示することができます。<p>のような始まりのタグを「開始タグ」、</p>のような閉じるタグを「終了タグ」と呼びます。

開始タグと終了タグのタグ名は同じでなければなりませんが、終了タグのタグ名の手前にはスラッシュ（/）が必要です。また、<br>のように、開始タグと終了タグで囲む必要がなく、単体で機能するタグもあり、これは空要素と呼ばれます。

最近では、ブログサービスやホームページ作成サービス（WixやJimdoなど）を利用することで、特にHTMLの知識がなくても簡単にウェブサイトを作れるようになりました。ですが、HTMLの知識はあるに越したことはありません。ちょっとしたカスタマイズをするにも、調整を行うにも、HTMLでコーディングできるかできないかでは大きな差が出ます。

HTMLのタグ名を覚えるコツ

HTMLのタグ名を覚えられず、苦戦する人は少なくありません。極論を言えば、HTMLのタグ名は覚えなくても、一つひとつ、その都度調べれば、コーディングはできます。しかし、それではやはり効率が悪いので、主要なものは覚えておくのがベターです。普段からHTMLでコーディングしていれば、使用頻度の高いタグ名は自然と覚えていきますが、ここではその入り口として、基本タグの主な使い方を覚えてしまいましょう。

HTMLのタグ名を覚えられない場合、それはおそらくタグ名を無機質な記号としてとらえているからかもしれません。無機質な記号を覚えるのでは、脳に定着しません。しかし、実際には、HTMLのタグ名にはそれぞれ意味するものがあります。各タグ名には対応する英語があり、それぞれ頭文字を取ったり、省略表記したり、あるいはそのまま英単語になったりしています。

段落の英語はParagraphだから<p></p>、見出しの英語はheadingだから<h1></h1>（数字は見出しのレベルを指しています）、画像の英語はimageなので<img>と英語を起点に考えると、タグ名はグッと覚えやすくなります。

実用的なHTML基本タグ｜暗記クイズ

下表は、よく使われるHTMLタグの一覧です。表を見てタグを一通り覚えてみてください。ある程度覚えたら、今度はクイズに挑戦してみましょう。クイズはランダムで出題されますので、何度か挑戦してみてください。クイズを通して、HTMLコーディングの基礎力を身につけましょう。

タグ	英語	主な役割、使い方	備考
<h1></h1>	heading	見出しとして表示する。	h1なら大見出し、h2なら中見出し、h3なら小見出しと使い分ける。<h6></h6>まである。
<p></p>	paragraph	段落として表示する。
<a></a>	anchor	発リンクを設定する。	<a href="リンク先">と設定する。
<img>	image	画像を表示する。	空要素（終了タグ不要）。<img src="画像データ参照先">と設定する。
<br>	break	改行する。	空要素（終了タグ不要）。
<hr>	horizontal rule	水平線を表示する。	空要素（終了タグ不要）。
<b></b>	bold	太字にする。
<strong></strong>	strong	重要であることを示す。
<em></em>	emphasis	強調する。
<i></i>	italic	斜体にする。
<mark></mark>	mark	ハイライト（マーカー）をつける。
<span></span>	span	CSSなどで、部分的に特定の処理をする範囲を指定する。	タグ自体に意味はなく、囲んだコンテンツにCSSなどを指定するのによく使われる。インライン要素（タグをつけても改行されない要素）。
<div></div>	division	ブロックの箱を作る。	ブロックの前後には改行が入る。
<ul></ul>	unordered list	順番なしのリストを作る。	タグ内に<li></li>を記述して、リストを作る。
<ol></ol>	ordered list	順番つきのリストを作る。	タグ内に<li></li>を記述して、リストを作る。
<li></li>	list item	リストの項目を作る。	<ul></ul>または<ol></ol>の中に記述する。
<form></form>	form	フォームを作る。	通常は、<form></form>内に<input>、<select></select>、<textarea><textarea>などの部品を入れる。
<input>	input	入力欄やボタンなど、フォームの部品を作る。	空要素（終了タグ不要）。type属性を設定することで、さまざまな部品になる。
<button></button>	button	ボタンとして表示する。
<table></table>	table	表を作る。	<table></table>内に<tr></tr>、<th></th>、<td></td>などの部品を入れる。
<tr></tr>	table row	表の行を作る。	数に応じて、行の数が決まる。
<th></th>	table heading	表内に見出し情報を入れる。	数に応じて、列の数が決まる。
<td></td>	table data	表内に情報を入れる。	数に応じて、列の数が決まる。
<ruby></ruby>	ruby	ルビ（よみかた）の範囲を指定する。	タグ内のルビを振る文字の後ろに<rt></rt>を指定してルビを振る。
<rt></rt>	ruby text	ルビを振る（よみかたをつける）。	<ruby></ruby>内、ルビを振る文字の後ろで指定する。
<sup></sup>	Superscript	文字を上付きにする。	数値や数式で多用する。
<sub></sub>	Subscript	文字を下付きにする。	化学式で多用する。
<html></html>	html	HTMLファイルであることを宣言する。	<!DOCTYPE>タグを除いて、ファイルの先頭に記述する。
<head></head>	head	サイトの情報や参照ファイルを指定するエリア。	ブラウザで表示されないサイトの情報や読み込むその他ファイルを指定するエリア。
<title></title>	title	ページ名を表示する。	検索エンジンの検索結果画面やブックマーク時に表示される。SEOの最重要要素のうちの一つ。
<body></body>	body	ブラウザ上に表示する情報を記載するエリア	<body></body>タグ内に実際にブラウザに表示する情報を入れる。
<header></header>	header	ページのヘッダー部分であることを示す。	<body></body>タグ内に設置する雛形的なタグ。通常はページ上部の定型部に使用する。<head></head>と間違えやすいので注意。
<main></main>	main	ページの主な内容が記載されるエリア	<body></body>タグ内に設置する雛形的なタグ。通常はページ中央部に使用する。
<footer></footer>	footer	ページの下部	<body></body>タグ内に設置する雛形的なタグ。通常は、ページ下部の定型部に使用する。
<section></section>	section	ひとまとまりであることを示す。
<nav></nav>	navigation	ナビゲーションであることを示す。	リンクを貼ったひとまとまりのメニューを囲む。

おまけ：HTMLで表を作るためのタグ名の覚え方

ウェブサイトで表を作る場合、いくつかのタグを組み合わせることがあり、パッと見では複雑に思えるかもしれません。しかし、一つひとつのタグの意味を理解すれば、効率的に覚えられると思います。

まず、表は英語で"table"といいます。そのため、最初は<table></table>を作ります。

表を作る手順1

<table></table>

次に考えるのが、表の行です、横を表すやつです。行は英語で"row"といいます。表の行なので"table row"を意味する<tr></tr>タグを使います（<row>というタグはありませんので気を付けてください）。<tr></tr>を<table></table>内に作ります。<tr></tr>を2つ作れば2行に、3つ作れば3行になります。

表を作る手順2

<table>
  <tr>
  </tr>
  <tr>
  </tr>
</table>

そうしたら、データを入れていきます。データは英語で"data"です。tableに入れるdataなので<td></td>タグを使います。<td></td>を<tr></tr>内に作ります。ここで大切なのは、作る<td></td>の数によって列数が決まるということです。2つ作れば2列に、3つ作れば3列になります。以下では、3列作ってみましょう。

表を作る手順3

<table>
  <tr>
    <td>1行：1列</td>
    <td>1行：2列</td>
    <td>1行：3列</td>
  </tr>
  <tr>
    <td>2行：1列</td>
    <td>2行：2列</td>
    <td>2行：3列</td>
  </tr>
</table>

ブラウザで確認する

さて、必要最小限の表はこれでできました。しかし、多くの場合、表にも見出しがあります。その場合、<td></td>ではなく、表見出し"table heading"を表す<th></th>を使います。

一番上の行が見出しの場合

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>30歳</td>
    <td>男</td>
  </tr>
  <tr>
    <td>鈴木 あかね</td>
    <td>20歳</td>
    <td>女</td>
  </tr>
</table>

ブラウザで確認する

一番左の列が見出しの場合

<table>
  <tr>
    <th>旅行先</th>
    <td>北海道</td>
    <td>沖縄</td>
  </tr>
  <tr>
    <th>人数</th>
    <td>1人</td>
    <td>2人</td>
  </tr>
  <tr>
    <th>料金</th>
    <td>20000円</td>
    <td>50000円</td>
  </tr>
</table>

ブラウザで確認する

HTMLでは、このようにいくつかのタグを組み合わせて表を作成します。実際には、表に枠線をつけたり、色をつけたり、各行各列の長さを調整したりしますが、そのためには適切なタグに対してCSSで処理する必要があります。各タグの意味を理解しておくと、CSSで装飾するときにも、必ず役に立ちます。

また、<th></th>の代わりに<td></td>を使い、見出しとするところだけ個別に見出し風の装飾をすれば、ブラウザ上で見出しとして区別することはできます。しかし、HTMLで書かれている内容が、どのような性質のものなのかクローラーに正しく理解させてあげないと、検索表示上、望ましいものではありません。クローラーとは、サイト内を巡回して、HTMLなどからサイトを認識し、検索エンジンから検索できるようにするサイト巡回ロボットです。クローラーにサイト構造やサイトコンテンツを正しく認識させるためにも、適切なHTMLタグを使うのが望ましく、適切なタグを使うことは、ゆくゆくSEOにもつながります。