HTMLタグはカンニングOK！現場で使う主要タグ25種類

WEB制作 2021.10.11

HTMLタグの種類は140以上。ほとんどが使われることがないので、まず今回ご紹介するタグを覚えましょう。

覚えるといっても暗記する必要はありません。

HTMLタグをはじめ、その他言語は作りながら身体に染みついていくものです。わからなかったら、調べて解決できれば問題ありません。

今回は現場で使用頻度の高いタグだけを25種類集めました。今回のタグに一通り目を通しておくだけでOKです。

HTMLとは

HTML[読：エイチティーエムエル]（Hyper Text Markup Language）はマークアップ言語と言われ、カンタンにいうとコンピュータに内容を伝えるための言語です。

WEBサイトを作るのは難しいように感じますが、WEBサイト自体は、テキストファイルを作って拡張子を「.html」にするだけでWEBページとして表示することができます。

しかし、ユーザーが見づらいのはもちろん、コンピュータも何が書いてあるのか理解することができません。

コンピュータにどんな内容が書かれているのかを伝えるものがHTMLで使用する「HTMLタグ」です。

HTMLタグとは

ではHTMLタグはどのように書かれているのか見ていきます。

基本的な構造は

<開始タグ> ここにテキストが入ります。 </終了タグ>

となっており、開始タグと終了タグにはそれぞれ同じものが入ります。

実際の書き方は以下の通り。

<h2>HTMLとは</h2>
<p>HTMLとはコンピュータに内容を伝えるための言語です。</p>

「h2」は見出しを表すタグで「p」は段落を表すタグです。

このように記述することにより、「HTMLとは」が見出しで「HTMLとはコンピュータに内容を伝えるための言語です。」は文章だということをコンピュータに伝えます。

また、画像などのように、終了タグがないタグも存在します。

<img src="画像ファイル名">

画像を表示するためのimgタグですが、imgタグ自体が画像としての意味を持っているので、閉じタグを必要としません。

現場で使うHTMLタグ一覧

現場で使うHTMLタグ

HTMLには140近くのタグが用意されています。

全部を覚える必要はないので、現場で使う必要なものだけをリストアップしました。

これらのタグとタグの意味を重点的に覚えておけばとりあえずOKです。

また、これらタグのことを総称して「要素」と呼びます。

基本構造タグ

htmlタグ

HTML要素はHTML文書において最上位のルート要素を表します。

カンタンにいうと、すべての要素がこのHTML要素の中に入るということです。

また、詳しい説明は省略しますが、タグの中には「属性」というものをが入ります。下記の場合「lang属性」に「ja」を入れることで、日本語の文書だということを明記します。

<!DOCTYPE html>
<html lang="ja">
  すべての要素がこの中に入る
</html>

これは基本の型なのでこの形から始まるということだけ覚えておいてください。

CHECK！

HTMLタグの前に<!DOCTYPE html> と書かれていますが、これは「HTML5の文書を作成します」という宣言です。

必ず必要なものなのでHTMLタグとセットで覚えておきましょう。

headタグ

メタデータの集まりをまとめているのがheadタグで、文字通り人間でいうところの頭の部分にあたります。

HTML要素の直下の子要素としてだけ認められていて、一つのファイルに一つだけ使用することができます。

記述する場所は<html lang=”ja”>のすぐ下になります。

<!DOCTYPE html>
<html lang="ja">
  <head>
  メタデータがこの中に入る
  </head>
</html>

このhead要素も基本の型として覚えておいてもらえば大丈夫です。

metaタグ

meta要素はメタデータを定義する要素です。メタデータとはファイル文書の文字コードや概要に関する情報のことを言い、head内に記述します。

またmeta要素は閉じタグが必要ないので気を付けましょう。

内容を理解するのは難しいので、コードで紹介します。

<!DOCTYPE html>
<html lang="ja">
  <head">
    // 文字コードの設定（基本的にUTF-8でOK）
    <meta charset="UTF-8">
    // スマホ向けに表示方法を指定
    <meta name="viewport" content="width=device-width, initial-scale=1">
    // ページの概要・注釈
    <meta name="description" content="ページの概要・注釈が入ります">
    // ページの重要な語句・キーワード
    <meta name="keywords" content="ページの重要な語句・キーワードが入ります">
  </head>
</html>

こんな感じで、ページの基本情報が入ります。

下記のページにmetaタグについてまとめてあります。

【完全ガイド】HTMLのmetaタグの必要性と使い方

titleタグ

タイトル要素はその名前の通りページのタイトルです。必ず1ページにひとつ必要でメタデータと同じくhead内に記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ページのタイトル</title>
  </head>
</html>

このタイトルは、ブラウザのタブに表示されたり、検索結果のタイトルとして表示されるため非常に重要な要素なので必ず設定するようにしましょう。

linkタグ

link要素はページの文書と外部のリソースを関連付けるために使用します。

WEBページは様々なファイルをHTMLにまとめて表示します。中でも必ずと言っていいほど使用されるのがcssと言われるスタイルシートでWEBページの装飾に使われる言語です。

このlink要素もhead内に記述します。

またlink要素もmeta要素と同じく閉じタグが必要ないので気を付けましょう。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<link rel="stylesheet" href="cssファイル">
	</head>
</html>

scriptタグ

script要素はjavascriptと言われるスクリプトコードなどを読み込んで実行します。

外部ファイルのjavascriptコードを読み込んだり、script要素内に直接スクリプトコードを記述することもできます。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<script src="javascriptのファイル"></script>
		// もしくは
		<script>
		consol.log('HELLO');
		</script>
	</head>
</html>

bodyタグ

body要素はHTML文書の内容を表す要素です。実際のWEBページに表示したいものをbody要素の中に記述していきます。

またbody要素はhtml要素の中に1つだけ使用することができます。実際の使い方としては、head要素の次の記述することになります。

ここまでがWEBページを表示するときに必須な要素ですので、実際にWEBページを作るときのひな型のコードを記載します。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>ページのタイトル</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link rel="stylesheet" href="cssファイル">
		<script src="javascriptのファイル"></script>
	</head>
	<body>

	// この中にページに表示したい文章や画像を記述していく

	</body>
</html>

覚えておくべきタグ

今から紹介するタグは仮に使い方を間違っても表示自体はされます。

しかしコンピュータはこのタグを見てページの内容を判断するため、しっかりと使わないと、エラーにならずともWEBサイトの評価は下がってしまいます。

どんなタグをどんな時に使うのかをご紹介します。

headerタグ

header要素はユーザーに見せるページ情報をまとめるものとして使用されます。

例えば、あとで紹介していますが、ナビゲーションを表す<nav>やロゴといったものが入ります。

よく勘違いされるのは「header要素はページに一つでなくてはいけない」と思われがちですが、セクションの見出しが入る部分や今回の記事のようにタイトルや、サムネイル、カテゴリー情報などをヘッダーとして利用することもできます。

header要素は1ページ内で何度使っても大丈夫だということを覚えておいてください。

footerタグ

footer要素もヘッダーと同じように使われますがもっとも違うのはユーザーに見てもらいたい優先度。

header要素と同じように<nav>やロゴをfooter要素の中に入れることが多く、会社の情報やコピーライトをページの補足情報として記載します。

footer要素は基本的にページの最下部にありますが、意味があればページのどこで使用しても大丈夫です。

また、header要素と同じようにfooter要素は1ページ内で何度でも使うことができます。

navタグ

nav要素は主要ナビゲーションに使われるタグです。

header内にあるグローバルナビやページ内にあるローカルナビなどに使用されます。

nav要素は基本的にリストになっていることが多いので、後述するulタグと一緒に使用されることが多いです。

<nav>
	<ul>
		<li><a href="top">TOPページ</a></li>
		<li><a href="company">会社案内</a></li>
		<li><a href="contact">お問い合わせ</a></li>
	</ul>
</nav>

sectionタグ

section要素は一般的な「セクション」に使用されます。sectionは基本的に見出しを伴う文章のかたまりなので、後述する見出し（h1～h6）が必要になります。

<section>
	<h2>大見出しが入ります</h2>
	<p>これは大見出しの文章です。セクションは見出しを伴うのでこのセクションの見出しは「大見出しが入ります」です。</p>
</section>

articleタグ

article要素は独立した記事などを表すための要素です。

今回の記事でいうと今読んでるこの記事自体がarticle要素で囲まれています。独立した記事とはarticle内のものだけで成立するものを言います。

<article>
	<h1>カレーの作り方</h1>
	<p>カレーの作り方を紹介します。</p>
	<section>
		<h2>必要な道具</h2>
		<p>必要な道具は包丁、まな板、なべです。</p>
	</section>
	<section>
		<h2>必要な野菜</h2>
		<p>必要な野菜はジャガイモ、人参、玉ねぎです</p>
	</section>
</article>

section要素とarticle要素の使い分けがよくわからない人が多いですが、sectionやarticleで囲んだ内容だけを印刷するとして、その内容だけで意味が分かれば、article要素。意味が分からなければsection要素ということになります。

上記のコードを例にすると、article全体を印刷すれば、カレーの作り方なんだなとわかりますが、sectionで印刷すると「必要な道具」「必要な道具は包丁、まな板、なべです。」とだけ言われても全く意味がわかりません。

CHECK

section要素とarticle要素の使い分けがわからなくなったときは上記のように記事が独立しているかで判断しましょう。

asideタグ

aside要素は記事内などの補足情報を表す要素です。

PCでこの記事を見ている人は記事の右側。スマホで見ている人は記事おわりの下にある、カテゴリ一覧などがこのaside要素に当てはまります。

他にも注釈などを付ける際に使用されることがあります。

基本的には、サイドバーによく使われるので、サイドバー＝asideと覚えておいても大丈夫です。

h1～h6タグ

h1～h6の「h」はheadingの「h」で見出しという意味になります。

1～6の数字でわかるように、h1～h6は順番に使用しなければいけません。

また、h1～h6の見出しタグはsectionと一緒に使うのが基本ですが、h1～h6を使用した場合にはsectionタグを省略することが可能です。

<article>
	<h1>カレーの作り方</h1>
	<p>カレーの作り方を紹介します。</p>
	<!--見えないセクション-->
	<h2>必要な道具</h2>
	<p>必要な道具は包丁、まな板、なべです。</p>
	<!--見えないセクション-->	
	<h3>なべの大きさ</h3>
	<p>なべは直径30センチ以上のものを使いましょう</p>
	<!--見えないセクション-->
	<h2>必要な野菜</h2>
	<p>必要な野菜はジャガイモ、人参、玉ねぎです</p>
</article>

pタグ

p要素はparagraph の「p」で、段落を意味し、段落とは一塊になっている文章のことを指します。

文章が極端に長くても使用できますが、p要素は息継ぎみたいなものなので、極端に長い文章はいくつかのp要素で区切るのが理想です。

<!--文章が長くなりすぎると読みづらい-->
<p>カレーを作るにはまず野菜を切り、その後に肉を切ります。これは肉の臭みが野菜につかないようにするためです。そうすることで仕上がったときの生臭さがなくなり、風味がよくなります</p>

<!--文章に適度な段落を付けることで読みやすくなる-->
<p>カレーを作るにはまず野菜を切り、その後に肉を切ります。</p>
<p>これは肉の臭みが野菜につかないようにするためです。</p>
<p>そうすることで仕上がったときの生臭さがなくなり、風味がよくなります。</p>

aタグ

a要素はhref属性を指定した場合、リンクアンカーの役割をし、hrefを伴うa要素は、目的のページや、セクションに移動するときに使用します。

href属性にWEBサイトのURLや、移動したい場所へのIDを入れることにより、目的の場所に移動します。

<!-- https://uptechdesign.comのaboutページに移動 -->
<a href="https://uptechdesign.com/about/">当サイトについて</a>

<!-- idがnumber-01の所に移動 -->
<a href="#number-01">a要素について</a>
<section>
	<h2 id="number-01">a要素について</h2>
	<p>a要素はhref属性を指定した場合、リンクアンカーの役割をし、hrefを伴うa要素は、目的のページや、セクションに移動するときに使用します。</p>
</section>

strongタグ

strong要素は、重要な語句を指定するときに使います。

上記の太字になっている部分がstrong要素になっています。

strong要素は重要な語句なのがわかるように太字になりますが、単に文字を太くしたいからという理由でstrong要素を使用してはいけません。

本当に重要な語句にだけ使用するようにしましょう。

timeタグ

time要素は名前の通り「時間」や日付に使用し、ブログやお知らせなどがいつ公開されたかを明示します。

time要素は属性値に「datetime」を使用しなければいけません。datetime属性は日付や時間をコンピュータに伝えるためのもので、このdatetime属性を使わないのであればそもそもtime要素を使う必要がないからです。

また、日付の明示には単なる数字だけでなく記事内の「今日」や「明日」といったように日にちが過ぎるとわからなくなるものにも使用することができます。

<h2>日記：アサガオが咲いた</h2>
<p>日記の公開日：<time datetime="2021-06-08">2021年6月8日</time></p>
<p>楽しみにしていたアサガオが<time datetime="2021-06-07">昨日</time>咲いた。とてもうれしい。<p>

smallタグ

smallタグは注釈を表し、WEBページのコピーライトや補足説明などに使用されます。

<p>七日間限定で50%OFF!</p>
<small>※なくなり次第終了となります。</small>

ulタグ、olタグ、liタグ

ulタグ、olタグ、liタグはセットで使います。

ul要素は順不同リストと言われ、順番は決まっていないリストを表示する際に使用します。

また、ol要素はulと違い序列リストと言われ、順番が決まっているリストとして使用されます。

ul、olの中にli（list item）として中身を記述します。

ulの表示

ジャガイモ
ニンジン
玉ねぎ
豚肉

olの表示

材料をきる
炒める
煮込む
ルーを入れる

<!-- ulタグ（順不同リスト：順番は決まっていない） -->
<h2>カレーの材料</h2>
<ul>
	<li>ジャガイモ</li>
	<li>ニンジン</li>
	<li>玉ねぎ</li>
	<li>豚肉</li>
</ul>

<!-- olタグ（序列リスト：順番が決まっている） -->
<h2>カレーの作り方</h2>
<ol>
	<li>材料をきる</li>
	<li>炒める</li>
	<li>煮込む</li>
	<li>ルーを入れる</li>
</ol>

CHECK

ulタグ、olタグの中に入るのはliタグだけで、逆にliタグはulタグ、olタグの中にしか入らないということを覚えておきましょう。

dlタグ、dtタグ、ddタグ

dlタグは「ディスクリプションリスト」の略で「定義リスト」を表します。

dlタグ、dtタグ、ddタグはセットで使い、dtタグは「語句」を、ddタグは「説明」を表します。

dtタグの語句をddタグで説明し、それらをdlタグで囲うといった形になります。

<dl>
	<dt>ジャガイモ</dt>
	<dd>丸くてごつごつした野菜</dd>
	<dt>ニンジン</dt>
	<dd>オレンジ色が特徴の野菜</dd>
	<dt>たまねぎ</dt>
	<dd>切ると涙が出てくる野菜</dd>
</dl>

CHECK

dlタグの中に入るのはdtタグとddタグだけで、逆にdtタグとddタグはdlタグの中にしか入らないということを覚えておきましょう。

tableタグ、trタグ、thタグ、tdタグ

tableタグはtrタグ、thタグ、tdタグと共に以下のような表組みを表します。

野菜	ジャガイモ	ニンジン	玉ねぎ
くだもの	リンゴ	バナナ	ブドウ

上記の場合横2行×4列の表組みとなり、横の行をtr、縦の列をth、tdで表示します。

th「テーブルヘッダー」では見出しとなる語句を記述します。上記でいうと「野菜」「くだもの」がthにあたります。

<table>
	<tr>
		<th>野菜</th>
		<td>ジャガイモ</td>
		<td>ニンジン</td>
		<td>玉ねぎ</td>
	</tr>
	<tr>
		<th>くだもの</td>
		<td>リンゴ</td>
		<td>バナナ</td>
		<td>ブドウ</td>
	</tr>
</table>

CHECK

tableタグには、上記の他にthead、tbody、tfootというタグを使用することでグルーピングすることができます。

formタグ、inputタグ、textareaタグ、buttonタグ

formタグはユーザーが入力できる要素（input、textareaなど）を配置して、入力された情報をサーバーに送信できることができます。

よく使われるのはお問い合わせフォームや検索フォームなどです。

HTMLでマークアップしただけでは特に意味をなさず、PHPなどのサーバーサイドの知識が必要になってきます。

divタグ

divタグは、特に意味を持たず、大枠的に要素をまとめる使い方をします。

極端な話全部のタグを「div」に置き換えることもできます。しかしそれでは、タグに意味がなくなるため、基本は意味のあるタグを利用し、それ以外の枠でdivを採用します。

また、cssでの装飾をする際にもコンテナとして使用されます。

spanタグ

spanタグはdivタグと同じように特に意味を持たず、使わなくても全く問題のないタグです。

divと同じような使い方ですが、違いとしては、spanタグはフレージング・コンテンツだということ。

フレージング・コンテンツとは文書内のテキストをマークアップするカテゴリで、フレージング・コンテンツの集まりで段落が形成されます。

カンタンにいうとpタグの中にspanタグは入れることができるが、pタグの中にdivタグは入れることができないということ。

また逆にフレージング・コンテンツは基本的にフレージング・コンテンツ以外入れることができないのでspanタグの中にpタグやsectionタグを入れることはできません。

今回の記事で紹介したフレージング・コンテンツ

imgタグ
smallタグ
spanタグ
strongタグ
time タグ
aタグ（aタグだけは特別で親要素のコンテンツモデルを継承する）

実際のソースコードをみる

百聞は一見にしかずなので、実際のソースコードを見たほうが早いです。

WEBサイトのソースコード確認方法は

WEBサイト上の何もないところで右クリック→「ページのソースを表示」
もしくはショートカットキーCtrl+U（Windows）または ⌘Option-U（Mac）を押す。

そうすると今回紹介したタグがたくさん出てくるのがわかると思います。

実際のWEBページはこれらのタグがたくさん集まって形成されています。

結論：全部覚えなくてもマークアップはできる

今までさんざん説明してきましたが、全部覚えようとする必要は全くありません。

HTMLタグはやっているうちに自然と覚えていくので、こんなのがあったかなという程度で全然大丈夫。

わからなければ調べればいいんです。WEB制作はカンニングOKなんです。

どんどんカンニングして（調べて）身につけていきましょう。