2026年4月14日
HTMLタグとは？
HTMLはウェブページの内容と構造を作る言語で、タグ（tag） という部品を組み合わせて書きます。タグは < と > で囲まれた命令で、「ここは見出しです」「ここはリンクです」とブラウザに伝える役割を持っています。
HTMLのタグは100種類以上ありますが、実際によく使うのは20〜30個程度です。この記事では、初心者が最初に覚えるべきHTMLタグ20個をコード例付きで解説します。
タグの基本形は次のとおりです。
<タグ名>内容</タグ名>開始タグ <タグ名> と終了タグ </タグ名> で内容を挟みます。<br> や <img> のように終了タグが不要なタグもあります。
① ページの骨格を作るタグ（4つ）
HTMLファイルには必ず必要な「骨組み」があります。
| タグ | 意味・使い方 |
|---|---|
<!DOCTYPE html> | 「これはHTMLファイルです」とブラウザに伝える宣言 |
<html> | HTMLファイル全体を囲む。lang="ja" で日本語ページと指定 |
<head> | ページの設定情報を書く場所。画面には表示されない |
<body> | ブラウザに表示される内容をすべてここに書く |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<!-- ここに内容を書く -->
</body>
</html>👉 HTMLコメントの書き方も参考にしてください。
② テキストを表示するタグ（7つ）
| タグ | 意味・使い方 |
|---|---|
<h1>〜<h6> | 見出し。h1が最大、h6が最小。ページに h1 は1つだけ使うのが基本 |
<p> | 段落（paragraph）。文章のかたまりを表す |
<strong> | 重要な言葉を太字にする |
<em> | 強調したい言葉を斜体にする |
<br> | 改行。終了タグなし |
<span> | 文章の一部にCSSを当てたいときに使うインライン要素 |
<code> | コードや命令文を等幅フォントで表示する |
<h1>私の自己紹介</h1>
<h2>好きなもの</h2>
<p>私は<strong>プログラミング</strong>が大好きです。</p>
<p>特に<em>JavaScript</em>が楽しいです。</p>▶ プレビュー
③ リスト・リンク・画像のタグ（5つ）
| タグ | 意味・使い方 |
|---|---|
<ul> | 箇条書きリスト（順番なし）。<li> を子要素に持つ |
<ol> | 番号付きリスト（順番あり）。<li> を子要素に持つ |
<li> | リストの各項目 |
<a> | リンク。href 属性でリンク先URLを指定する |
<img> | 画像を表示。src で画像ファイルを、alt で代替テキストを指定。終了タグなし |
<!-- 箇条書きリスト -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- 番号付きリスト -->
<ol>
<li>HTMLを学ぶ</li>
<li>CSSを学ぶ</li>
<li>JavaScriptを学ぶ</li>
</ol>
<!-- リンク -->
<a href="https://example.com">サイトへ移動</a>
<!-- 画像 -->
<img src="photo.jpg" alt="プロフィール写真">🔥 HTMLとは？初心者向け解説で実践してみましょう。
④ フォームと構造のタグ（4つ）
| タグ | 意味・使い方 |
|---|---|
<div> | 複数の要素をまとめるブロック要素。CSSでレイアウトを組むときによく使う |
<button> | クリックできるボタン。JavaScriptと組み合わせて使うことが多い |
<input> | テキスト入力欄など。type 属性で種類を変えられる。終了タグなし |
<form> | 入力フォーム全体を囲む。input や button をまとめる |
<div class="card">
<h2>お問い合わせ</h2>
<form>
<input type="text" placeholder="名前を入力">
<input type="email" placeholder="メールアドレス">
<button type="submit">送信する</button>
</form>
</div>💡 HTMLリストの作り方で基礎を確認できます。
20タグ まとめ一覧
| タグ | 役割 |
|---|---|
<!DOCTYPE html> | HTML宣言 |
<html> | ページ全体 |
<head> | 設定情報 |
<body> | 表示内容 |
<h1>〜<h6> | 見出し |
<p> | 段落 |
<strong> | 太字・重要 |
<em> | 斜体・強調 |
<br> | 改行 |
<span> | インライン装飾 |
<code> | コード表示 |
<ul> | 箇条書きリスト |
<ol> | 番号付きリスト |
<li> | リスト項目 |
<a> | リンク |
<img> | 画像 |
<div> | ブロックのまとまり |
<button> | ボタン |
<input> | 入力欄 |
<form> | フォーム全体 |
まとめ
- ✅ HTMLタグは
<タグ名>内容</タグ名>の形で書く - ✅
<h1>〜<h6>で見出し、<p>で段落を作る - ✅
<a href="...">でリンク、<img src="...">で画像を表示 - ✅
<ul><li>で箇条書き、<ol><li>で番号付きリスト - ✅
<div>で要素をまとめてCSSでレイアウトを組む
まずはこの20個を使いながら、実際にページを作ってみましょう。手を動かすことが一番の近道です。