【HTMLタグ一覧】基本構造からコンテンツ内のタグまで初心者向けに解説

シュウ

公開日: 2020.03.01 / 更新日: 2026.11.05
今回は「【HTMLのタグ一覧】」のご紹介です。
基本構造からコンテンツ内のタグまで解説します！

HTMLを学び始めたばかりの方
HTMLの基本構造や、よく使うタグの意味と書き方を一通り知りたい方です。
ホームページ制作の現場で使うタグを確認したい方
見出し、段落、画像、リンク、リストなど、実務でよく使うタグを整理したい方です。
タグの使用例をコピーして試したい方
コピーボタン付きのコードで、すぐに動作を確認したい方です。

HTMLの基本構造とheadタグ内について

まずは、すべてのHTMLファイルに共通する基本構造です。
head内にはページの情報を、body内には画面に表示する内容を記述します。
書き方は以下のようになります。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>【HTMLのタグ一覧】基本構造からコンテンツ内編 初心者でも大丈夫</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>


</body>
</html>

●①doctype宣言: <!doctype html>で、このファイルがHTML5で書かれていることをブラウザに伝えます。

●②htmlタグ: HTML文書全体を囲みます。lang="ja"で、ページの言語が日本語であることを指定します。

●③metaタグ: charset="UTF-8"で文字コードを指定し、viewportでスマートフォンでの表示幅を調整します。

●④titleタグ: ページのタイトルを指定します。ブラウザのタブや検索結果に表示されます。

●⑤linkタグ: CSSファイルを読み込みます。

●⑥bodyタグ: ブラウザに表示される内容を記述します。

htmlタグについて

<html>〜</html>の中に、すべての要素が入ります。HTML文書の基点となるタグです。
HTMLは「HyperText Markup Language(ハイパーテキストマークアップランゲージ)」の略です。

headタグについて

<head>〜</head>の中身は、ブラウザには表示されません。
head内には主に、タイトル、CSSファイル、JSファイルなどを記述します。

metaタグについて

metaは、文字コードやページの説明(description)などを設定するタグです。
metaは「Meta-information」の略です。

titleタグについて

<title>〜</title>は、ページのタイトルを表します。
ブラウザのタブに表示され、SEOにも大きな影響を与えます。

linkタグについて

<link href="">は、主にCSSファイルを読み込む際に使用します。
CSS以外の外部ファイルを読み込む際にも使用します。

bodyタグについて

<body>〜</body>の中身が、ブラウザに表示されます。
主に、見出しや文章、画像などのコンテンツ要素を記述します。

コンテンツ内のタグについて

ここからは、body内でよく使用するタグを紹介します。

h1〜h6タグについて

h1〜h6は、見出しを表すタグです。
数字が小さいほど大きな見出しになり、h6が最も小さい見出しです。見出しタグはh6までです。
h1〜h6は「Heading」の略です。

書き方は以下のようになります。

<h1>1番目に大きな見出し</h1>
<h2>2番目に大きな見出し</h2>
<h3>3番目に大きな見出し</h3>
<h4>4番目に大きな見出し</h4>
<h5>5番目に大きな見出し</h5>
<h6>6番目に大きな見出し</h6>

●①h1は1ページに1つ: h1はページ全体のタイトルとして、基本的に1ページに1つだけ使用します。

●②順番に使用する: h2の次にh4を使うなど、階層を飛ばさず順番に使用します。

See the Pen
bGdRgmp by shu (@shu0325)
on CodePen.

pタグについて

pは、文章の段落に使用するタグです。
段落の中で改行したい場合は、brタグを使用します。

<p>文章が入ります。文章が入ります。文章が入ります。</p>
<p>文章が入ります。文章が入ります。文章が入ります。<br>
brタグで改行します。</p>

●①pタグで段落を作る: pタグごとに段落が分かれ、前後に余白が入ります。

●②brタグで改行する: 同じ段落の中で改行したい場合にbrを使用します。

img(画像)タグについて

imgは、画像を表示するためのタグです。
src属性で表示したい画像を指定し、alt属性で画像の代替テキストを指定します。

<img src="/images/top/img_name.jpg" alt="画像の説明" width="800" height="302">

●①src属性: 表示したい画像のパスを指定します。

●②alt属性: 画像が表示されない場合や、音声読み上げ時に使われる代替テキストです。SEOにも有効です。

●③width・height属性: 画像の幅と高さを指定します。読み込み時のレイアウトのずれを防げます。

aタグについて

aは、リンクに使用するタグです。リンク先はhref属性に指定します。

href属性

リンク先のURLを指定します。
URLの後ろに#とid名を続けることで、ページ内の指定した位置へのリンクになります。

「tel:電話番号」を指定すると、スマートフォンでタップした際に発信できます。
「mailto:メールアドレス」を指定すると、メールソフト(メーラー)が起動します。

<a href="news.html#demo">「news.html」ページ内にあるid属性にリンクします</a>
<a href="tel:000-1234-5678">000-1234-5678</a>
<a href="mailto:example@example.com">送信先メールアドレス</a>

●①ページ内リンク: news.html#demoのように、#とid名を続けて指定します。

●②電話リンク: tel:に続けて電話番号を指定します。

●③メールリンク: mailto:に続けてメールアドレスを指定します。

target属性

targetを使用すると、リンク先を表示するウィンドウやタブ(ブラウジング・コンテキスト)を指定できます。

_blank	新しいウィンドウ(タブ)に表示します
_self	現在のブラウジング・コンテキストを使用します
_parent	親のブラウジング・コンテキストを使用します
_top	最上位のブラウジング・コンテキストを使用します

書き方は以下のようになります。

<a href="news.html" target="_blank" rel="noopener noreferrer">「news.html」を新しいウィンドウに表示します</a>

●①target=”_blank”: リンク先を新しいウィンドウ(タブ)で開きます。

●②rel=”noopener noreferrer”: _blankを使用する際に付けておくと、セキュリティ面で安全です。

ul、olタグについて

ulとolは、リストを作成するタグです。
各項目はliタグで記述します。

ulタグの使用例

<ul>
	<li>番号のないリスト表示になります</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

See the Pen
RwPgpKW by shu (@shu0325)
on CodePen.

olタグの使用例

<ol>
	<li>番号付きのリスト表示になります</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ol>

●①ul(Unordered List): 順序のないリストです。項目の頭に「・」が表示されます。

●②ol(Ordered List): 順序のあるリストです。項目の頭に「1、2、3…」と番号が表示されます。

●③liタグ: リストの各項目を表します。ulまたはolの中に記述します。

See the Pen
XWbgMpx by shu (@shu0325)
on CodePen.

strongタグについて

strongは、文章の中で重要な部分を強調するタグです。
ブラウザでは、初期状態で太字として表示されます。

<ul>
   <li><strong>HTML5</strong></li>
   <li>CSS3</li>
   <li>jQuery</li>
</ul>

●①strongで囲む: 強調したい部分だけをstrongで囲みます。

●②意味を持たせる: 見た目を太字にするだけでなく、「重要である」という意味を持たせるタグです。

See the Pen
bGdRrEg by shu (@shu0325)
on CodePen.

scriptタグについて

scriptは、JavaScriptを読み込む際に使用するタグです。
書き方は以下のようになります。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【HTMLのタグ一覧】基本構造からコンテンツ内編 初心者でも大丈夫</title>
</head>
<body>


<!--jquery-->
<script src="js/jquery-1.11.3.min.js"></script>
</body>
</html>

●①src属性: 読み込むJavaScriptファイルのパスを指定します。

●②bodyの閉じタグ直前に記述: ページの表示を妨げないよう、</body>の直前に記述するのが一般的です。head内に書く場合は、defer属性を付けると同様に表示を妨げません。

【HTML table】表を作成からレイアウトの変更までを解説

HTMLのtableタグについて説明しております。
cssでセルとの結合、border,罫線などtableタグに関する情報をお届けしております。
表を作成からレイアウトの変更まで1度お試しください。

まとめ

今回は、ホームページ制作でよく使用するHTMLタグについて、基本構造からコンテンツ内のタグまでまとめました。
head内にはページの情報を、body内には表示する内容を記述し、見出し・段落・画像・リンク・リストなどのタグを組み合わせてページを作成します。
この記事で紹介した以外にも、さまざまなタグがあります。今後も紹介していきますので、Twitterのフォローもよろしくお願いいたします。

POINT