HTMLのタグ

2025.07.15

HTMLタグとは

HTMLはHyperText Markup Languageの略で、ホームページを構築する際に使用されるマークアップ言語です。ホームページに表示されるテキストや画像などのコンテンツを構造化するためのもので、ブラウザに表示されるコンテンツの意味や構造を指定するために使用されます。

HTMLタグは角括弧で囲まれたテキストで表され、開始タグと終了タグのペアとして使用されます。
開始タグは <タグの名前> で表され、終了タグは <タグの名前/>と最後に/で閉じます。

基本的なページの構造は、全体を<html>タグで囲って以下の形になります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

</body>

</html>

<!DOCTYPE html>：このHTML文書がHTML5によって書かれているのを宣言するためのコードです。
<html>：HTML文書全体を囲むルート要素を定義します。lang=”ja”はこのHTMLが日本語で書かれているのをブラウザや検索エンジンに伝えるために記述します。
<head>：メタ情報（タイトルやスタイルシード）を定義します。
<meta>：HTML文書の「メタ情報（付加情報）」をブラウザや検索エンジンなどに伝えるタグです。上記のcharset=”UTF-8″はページの文字コード（文字の変換方式）を指定するのもので、文字化けを防ぐために付けます。UTF-8は世界中の文字を表現できる標準的で推奨される文字コードで日本語も含まれます。
<title>：検索エンジンに表示されるタイトルを定義します。
<body>：文書の本文を定義します。この中に書かれた内容がブラウザに表示されます。

よく使われるタグ以下表にします。

タグの名前	説明
body	ホームページの本体を表すタグ。この中に記述した内容はブラウザに表示される。
header	ホームページのヘッダーを表すタグ。
footer	ホームページのフッターを表すタグ。
section	文章の章や節目、区間を表現するために使用するタグ。中にhタグ必須。
nav	サイトのナビゲーション部分を示す際に使用するタグ。
aside	ページの補足的な情報を示す際に使用するタグ。サイドバーとかに使用されることが多い。
article	サイト内で独立しており、意味が完結しているコンテンツに使用するタグ。記事とかに使用されることが多い。
main	サイト本体の主要な内容を表す際に使用するタグ。
h1〜h6	見出しを作成する際に使用するタグで、数値が小さいほど重要度の高い見出しを表す。
address	サイトの所有者の連絡先を表すタグ。

タグの名前	説明
div	汎用タグ。要素をグループ化するときに使用される。
p	テキストの段落を作成する際に使用するタグ。
ul	順序なしのリストを作成する際に使用するタグ。リストの各要素にliタグを付ける。
ol	順序ありのリストを作成する際に使用するタグ。リストの各要素にliタグを付ける。
li	リストの要素を表すタグ。親要素にulかol必須。
figure	図を意味するタグ。imgタグを囲むときに使う。
figcaption	図の注釈を意味するタグ。figureタグの中に入れる。
dl	用語を説明するリストを表すタグ。説明にdtとddを子要素に入れる。
dt	用語のタイトルを表すタグ。dlの中に入れる。
dd	用語の説明を表すタグ。dlの中に入れる。

タグの名前	説明
span	インライン汎用タグ。要素をグループ化するときに使用される。子要素にブロック要素を入れるのはNG。
a	href属性を指定してリンクを貼るタグ。HTML5ではブロック要素を入れてもいい。
br	文章を改行するタグ。閉じタグは不要。
small	著作権表示や法的表記のような、注釈や小さく表示される文を表すタグ。
time	時間を表すタグ。 `datetime` 属性を使用して、機械可読な形式の日付を記述することができる。

タグの名前	説明
form	入力フォーム（送信フォーム）の範囲を定義するタグ。ユーザーからの入力をまとめて送信するための領域を作る。
input	ユーザーが文字や数値、チェックなどを入力するタグ。テキストボックス、チェックボックス、ラジオボタンなどを作る。
label	inputやselectなどのラベル（説明文）を関連付けるタグ。入力欄の説明を分かりやすくする・アクセシビリティ向上。
select	プルダウン（セレクトボックス）を作るタグ。ユーザーに選択肢を1つ（または複数）選ばせる。
option	selectタグの中の選択肢を定義するタグ。選べる各項目を表示する。
textarea	複数行のテキストを入力するエリアを作るタグ。コメントやメッセージなど長文の入力欄。
button	ボタンを作成するタグ。フォームの送信や、クリックでイベントを発生させる。

タグの名前	説明
details	折りたたみ可能な情報（開閉式のボックス）を表示するタグ。アコーディオンメニューで使用する。
summary	detailsタグの見出し部分（クリックする部分）を定義するタグ。アコーディオンメニューのクリック箇所を表す。
dialog	モーダルダイアログ（ポップアップのような表示）を作るタグ。