頻出HTMLタグ一覧を紹介！基本を確認しよう【初心者必見】
公開日：2021.10.18
スキルアップ
HTMLのタグは、非常に種類が多い傾向です。しかし、特に基本のタグから覚えていくと、初心者には学びやすくなります。そこで今回は、HTMLのタグの中でも押さえておきたいタグを一覧形式で紹介します。
タグ一覧は、HTMLの基本構造に関するタグ、入力フォームに関するタグ、コンテンツ作成時に多く利用するタグと、用途別にまとめました。 HTMLの学習を始めたばかりの初心者には必見ですので、ぜひ勉強にお役立てください。
HTMLの基本構造に関するタグ一覧
HTMLの基本構造に関する主なタグには、以下のようなものがあります。
この表は横スクロールでご覧いただけます
| タグ名 | 開始タグ | 終了タグ | 概要 |
|---|---|---|---|
| html | 省略可 | 省略可 | HTML文書であるという指定 |
| head | 省略可 | 省略可 | 文書のヘッダ部分を指定 |
| title | 必須 | 必須 | 文書のタイトルを指定 |
| meta | 必須 | なし | 文書のメタ情報を指定 |
| link | 必須 | なし | 関連する文書ファイルを指定してその関係を定義 |
| body | 省略可 | 省略可 | 文書の本体部分を指定 |
| section | 必須 | 必須 | 文章のまとまりを指定 |
| header | 必須 | 必須 | ヘッダを表示 |
| footer | 必須 | 必須 | フッタを表示 |
htmlタグ
HTML文書であることを示すタグで、最初に<html>、最後に</html>と記述します。「<!DOCTYPE html>」は、この文書のタイプがHTMLであることを宣言しています。
例：
<!DOCTYPE html>
<html lang="ja">
<head></head>
<body></body>
</html>
HTMLタグは、すべてhtmlタグに囲まれた中に記述します。
headタグ
文書のヘッダ情報を指定するタグです。titleタグ・metaタグなどは、headタグ内に記載します。CSSファイルや、JavaScriptを外部ファイルとして切り出した場合は、headタグ内に指定すると読み込めるようになります。
例：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="shift_jis">
<title>サンプルページ</title>
<link rel="stylesheet" href="samplestyle.css" type="text/css">
</head>
</html>
titleタグ
headタグ内に記載し、その文書のタイトルを指定するタグです。titleタグの内容は、Webブラウザのタイトルバーや検索結果のタイトルなど、さまざまな部分で表示されます。
また、検索エンジンは、titleタグの文字列に強い重みづけをしているため、SEO対策としても、「どのような文字列を指定するか」をじっくりと検討したいタグです。
例：
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
</head>
</html>
metaタグ
文書のメタ情報を指定するタグで、headタグ内に記載します。メタ情報は、Webブラウザの画面に表示されません。metaタグの情報は、Googleなどのロボット型検索エンジンに収集され、検索結果一覧に反映されます。
メタ情報は、サイトの制作者・Webページに関連するキーワード、文字コードの指定などに使われます。以下は、文字コードの指定に「Shift-JIS」を指定する例です。
例：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="shift_jis">
</head>
</html>
linkタグ
関連する文書ファイルおよび、そのファイルとの関係を示すタグです。例えば、以下の例は、参照先の文書がstylesheetであり、文書ファイルのURL（相対パス）は「samplestyle.css」、参照先の文書タイプ（MIMEタイプ）は「text/css」を示しています。
例：
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="samplestyle.css" type="text/css">
</head>
</html>
bodyタグ
文書本体の内容を指定するタグです。文章や画像など、本タグに指定する内容は、Webブラウザに表示されます。
例：
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>
sectionタグ
文章のまとまり（1章、2章など）を分けるときに利用するタグです。レイアウトとしてのまとまりを分ける場合は、本タグではなくdivタグを使います。
例：
<body>
<section>
<h2>1章</h2>
<p>地の文</p>
</section>
<section>
<h2>2章</h2>
<p>地の文</p>
</section>
</body>
headerタグとfooterタグ
headerタグとfooterタグについては、既存記事に記載があるのでご確認ください。
ここまで紹介したタグをすべて使ったHTMLの記述例です。
例：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="shift_jis">
<title>サンプルページ</title>
<link rel="stylesheet" href="samplestyle.css" type="text/css">
</head>
<body>
<header></header>
<main>
<section>
<h2>1章</h2>
<p>地の文</p>
</section>
<section>
<h2>2章</h2>
<p>地の文</p>
</section>
</main>
<footer></footer>
</body>
</html>
基本的なタグ一覧
以下の基本的な9つのタグは、関連記事で紹介しているのでそちらをご参照ください。
<a>
<img>
<p>
<table>
<nav>
<style>
<script>
コンテンツ作成時に頻出するタグ一覧
コンテンツ作成時に多く利用するタグの一覧は、以下の通りです。
この表は横スクロールでご覧いただけます
| タグ名 | 開始タグ | 終了タグ | 概要 |
|---|---|---|---|
| ol | 必須 | 必須 | 順序のある番号付きのリストを指定 |
| ul | 必須 | 必須 | 順序のない箇条書きのリストを指定 |
| li | 必須 | 省略可 | リストの項目を指定 |
| form | 必須 | 必須 | 入力・送信フォームを指定 |
| input | 必須 | なし | 入力部品を指定 |
| select | 必須 | 必須 | セレクトボックスを指定 |
| button | 必須 | 必須 | ボタンを指定 |
| label | 必須 | 必須 | フォーム内の項目ラベルを指定 |
| textarea | 必須 | 必須 | 複数行の入力エリアを指定 |
箇条書きに関するタグ
olタグは順序のある数字付きのリスト、ulタグは順序のない箇条書き、liタグはolタグ・ulタグのリスト項目を指定するためのタグです。
例：
<ol>
<li>数字付きその1</li>
<li>数字付きその2</li>
<li>数字付きその3</li>
</ol>
<ul>
<li>単なる箇条書きその1</li>
<li>単なる箇条書きその2</li>
<li>単なる箇条書きその3</li>
</ul>
formに関するタグ
入力・送信フォームを作成するために使うタグは、form・input・select・button・label・textareaです。各タグは、フォーム内に配置する入力エリアやボタンなどを指定するために使います。
例：
<form action="" method="post">
<p>
<textarea name="text" cols="60" rows="4">
1行当たり60文字、4行入力できます
</textarea>
</p>
<p>性別<br>
<select name="sex">
<option value="man">男性</option>
<option value="woman">女性</option>
</select>
</p>
<p>
<input type="submit" value="送信">
</p>
</form>
テキスト用のタグ一覧
テキストに適用するタグの一覧は、以下の通りです。
この表は横スクロールでご覧いただけます
| タグ名 | 開始タグ | 終了タグ | 概要 |
|---|---|---|---|
| h1～h6 | 必須 | 必須 | 見出しを指定（h1が一番大きい見出し） |
| p | 必須 | 省略可 | 段落を指定 |
| br | 必須 | なし | 改行を指定 |
| div | 必須 | 必須 | ブロック要素を指定 |
| pre | 必須 | 必須 | 整形済みテキストを表示 |
| blockquote | 必須 | 必須 | 引用・転載文の部分を指定 |
| hr | 必須 | なし | 要素内における主題の意味的な区切り（水平線表示） |
見出しと段落に関するタグ
h1～h6タグは、見出しを指定するタグです。h1タグが一番大きいフォントで表示され、h2以降は順番に小さい見出しとなります。
例：
<h1>h1：見出し1</h1>
<h2>h2：見出し2</h2>
<h3>h3：見出し3</h3>
<h4>h4：見出し4</h4>
<h5>h5：見出し5</h5>
<h6>h6：見出し6</h6>
Pタグは段落を示し、終了タグで改行が入ります。brタグは、単純に改行したいときに利用するタグです。
例：
<p>この文は第2段落の1文目です。</p>
<p>この文は第2段落の1文目です。<br>この文は第2段落の2文目です</p>
divタグは、ブロック要素を指定するためのタグです。Sectionタグと違い、要素をひとかたまりのグループにして、一括でレイアウトを行うために利用します。
例：
<body>
<div>
<p>div1番目</p>
</div>
<hr>
<div>
<p>div2番目</p>
</div>
</body>
center・pre・blockquoteタグは、テキストの表示を修飾するために使用するタグです。hrタグは、要素（段落レベル）の間に意味的な区切りがある場合、例えば話題の切り替えや場面の転換などに指定します。
以前のhrタグは、水平線を引くための要素でしたが、現在では表示のための要素から意味論としての要素に変更されました。水平線を引く際は、別途CSSを利用してください。
HTMLタグの確認方法と注意点
ここまでHTMLタグの仕様について見てきましたが、記述したHTMLの確認方法と注意点について解説します。
HTMLタグをWebブラウザで表示する方法
HTMLタグをWebブラウザで表示するには、以下の手順で説明します。
-
1.テキストファイルに保存して拡張子をHTML用にする（.htmlや.htm）
-
2.表示したいWebブラウザを起動
-
3.保存したテキストファイルをWebブラウザ上にドラッグアンドドロップ
-
4.HTMLタグで指定した結果を表示
HTMLタグの記載が間違っている場合は、Webブラウザでうまく表示されないので、テキストファイルを修正して再読み込みをして、修正できたかどうかをご確認ください。
HTML作成時の注意点
HTMLの構造を理解し、頭の中で構造を確認しながら作成するようにしましょう。後から見ても構造を分かりやすくするために、適宜改行やコメントなども使用します。
HTMLタグを覚えるには実際に書いてみよう
初心者がHTMLの構造とタグを覚えるには、実際に自分でいろいろと記述してWebブラウザでどのように表示されるのかを確認するのが一番の近道です。思うような表示にならない場合は、原因を突き止めて正しい記述方法を確認していくと、HTML記述の技術力が身に付きます。
AKKODiSでは、派遣エンジニアの案件を多数掲載しています。HTML言語は、WebエンジニアやWebデザイナーには必須のスキルです。HTMLの実践力を身に付けるために、AKKODiSの派遣エンジニアの案件にも挑戦してくださいね。
（2021年10月現在）
