2 / 10

レッスン 2

30分

HTMLの基本タグ

📝 最後に理解度チェック（3問）があります

▶

解説動画は無料登録で視聴できます

全26コース・260レッスンが完全無料。登録は1分、クレジットカードは不要です

無料登録して動画を見るアカウントをお持ちの方はログイン

HTML基本タグ

HTMLを書く上で最初に覚えるべきタグは数十種類あります。ただし、日常的に使うタグは限られています。このレッスンでは、すべてのHTMLファイルに必要なDOCTYPE宣言・html・head・bodyの基本構造から、メタタグの役割、意味を持つセマンティックタグ、そして実務でよく使うタグ20選を学びます。タグの意味を理解してから使うことで、SEOやアクセシビリティにも配慮したコードが書けるようになります。

HTMLの基本構造

すべてのHTMLファイルは以下の骨格から始まります。この構造はVSCodeで「!」→Tabキーで自動生成できます。

HTML文書の基本構造とセマンティックタグ

DOCTYPE宣言

<!DOCTYPE html>

DOCTYPE宣言はHTMLファイルの最初の行に必ず書くものです。「このファイルはHTML5で書かれています」とブラウザに伝えます。DOCTYPE宣言がないと、ブラウザが「互換モード」で動作し、CSSのレンダリングに予期しないズレが生じます。

html要素

<html lang="ja">
  ...
</html>

すべてのHTMLコンテンツを囲むルート要素です。lang属性で言語を指定します。日本語サイトはlang="ja"、英語サイトはlang="en"と書きます。言語指定はスクリーンリーダーの読み上げやSEOに影響します。

head要素

head要素には**ページの設定情報（メタデータ）**を書きます。画面上には表示されませんが、ブラウザやSEOにとって重要な情報を含みます。

body要素

body要素には実際に画面に表示されるコンテンツを書きます。テキスト・画像・リンク・フォームなど、ユーザーが目にするすべての要素はここに記述します。

メタタグの役割

headの中に書くメタタグは、ページの動作やSEOに直結します。最低限覚えるべき4つのメタタグを解説します。

メタタグ	記述例	役割
charset	`<meta charset="UTF-8">`	文字コードを指定。UTF-8がデフォルト。文字化けを防ぐ
viewport	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	スマートフォン対応に必須。画面幅に合わせて表示を調整
description	`<meta name="description" content="説明文">`	Google検索の説明文（スニペット）に表示される
title	`<title>ページタイトル</title>`	ブラウザタブと検索結果のタイトルに表示される

⚠️ charsetは最初に書く: <meta charset="UTF-8">はheadの先頭に書きます。文字コードが後で指定されると、それより前のテキストが文字化けする場合があります。

SEOに関係するメタタグ

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLの基本を学ぼう | Web制作入門</title>
  <meta name="description" content="HTMLの基本タグを分かりやすく解説。初心者でも理解できる実例付きで説明します。">
  <link rel="stylesheet" href="style.css">
</head>

titleはページごとに異なる内容を設定し、30〜60文字程度が推奨されます。descriptionは80〜120文字で、そのページの内容を簡潔に表現します。

セマンティックタグとは

セマンティック（semantic）とは「意味のある」という意味です。HTMLには意味を持つタグと意味を持たないタグがあります。

意味を持たないタグ（非セマンティック）

◆<div> — ブロックレベルの汎用コンテナ。意味はなく、レイアウト目的で使う
◆<span> — インラインの汎用コンテナ。文中の一部をスタイル変更するときに使う

意味を持つタグ（セマンティック）

タグ	意味	使いどころ
`<header>`	ページや記事のヘッダー	ロゴ・ナビゲーション・タイトルを含む上部エリア
`<nav>`	ナビゲーション	メインメニュー・パンくずリストなどリンク集
`<main>`	メインコンテンツ	ページの主要コンテンツ。1ページに1個だけ
`<article>`	独立した記事	ブログ記事・ニュース記事など単独で意味を成す内容
`<section>`	テーマ別セクション	h見出しを伴うコンテンツのグループ
`<aside>`	補足コンテンツ	サイドバー・関連リンク・広告エリア
`<footer>`	フッター	著作権情報・問い合わせリンクなど下部エリア
`<figure>`	図版・キャプション	画像とfigcaptionをセットで使う

セマンティックHTMLを使う理由

◆SEO向上: Googleのクローラーがページ構造を正しく理解しやすくなります
◆アクセシビリティ改善: スクリーンリーダーがナビゲーションや主要コンテンツを識別できます
◆コードの可読性: <div id="header">より<header>のほうが、コードを読んだときに意味が明確です
◆保守性向上: 複数人での開発時にどのエリアがどこかを把握しやすくなります

💡 divを使っても動く、でも…: <div id="nav">と<nav>は見た目の動作は同じです。しかしSemanticタグを使うことで、検索エンジンとスクリーンリーダーに正しい情報を伝えられます。現代のHTMLコーディングではセマンティックタグを積極的に使うのが標準です。

よく使うタグ20選

実務で毎日使うタグを20個に絞って解説します。これだけ覚えれば基本的なページは作れます。

テキスト・見出し系（6タグ）

タグ	使い方	ポイント
`<h1>〜<h6>`	ページ内の見出し階層	h1は1ページに1個。SEOの最重要要素
`<p>`	段落テキスト	テキストのまとまりはすべてpで囲む
`<strong>`	重要な語句の強調	太字表示。b要素と違い意味を持つ
`<em>`	意味的な強調	斜体表示。i要素と違い意味を持つ
`<br>`	改行	自己終了タグ。段落を分けるのにはpを使う
`<hr>`	水平線による区切り	セクションの区切りを視覚的に示す

リスト系（3タグ）

タグ	使い方	ポイント
`<ul>` + `<li>`	順序なしリスト（箇条書き）	ナビゲーションメニューにも頻繁に使われる
`<ol>` + `<li>`	順序ありリスト（番号付き）	手順・ランキングなど順番に意味がある場合
`<dl>` + `<dt>` + `<dd>`	定義リスト	用語集・FAQ・スペック一覧に適している

リンク・メディア系（4タグ）

タグ	使い方	ポイント
`<a>`	ハイパーリンク	href属性でURLを指定。外部リンクはtarget="_blank"とrel="noopener"を追加
`<img>`	画像の表示	src属性で画像パス、alt属性で代替テキストを必ず指定
`<video>`	動画の埋め込み	controls属性で操作ボタンを表示。autoplayには注意
`<audio>`	音声の埋め込み	podcastや音声コンテンツに使用

構造・レイアウト系（4タグ）

タグ	使い方	ポイント
`<div>`	ブロックレベルの汎用コンテナ	セマンティックタグが使えない場面で使用
`<span>`	インラインの汎用コンテナ	文中の一部に色やスタイルを当てるとき
`<section>`	テーマ別セクション	見出しh2〜h6とセットで使う
`<article>`	独立したコンテンツ	ブログ記事・ニュース・口コミなど

フォーム系（3タグ）

タグ	使い方	ポイント
`<form>`	フォーム全体を囲む	action属性で送信先URLを指定
`<input>`	テキスト入力・チェックボックス等	type属性でtext / email / password / checkbox などを指定
`<button>`	ボタン	type="submit"でフォーム送信、type="button"でJavaScript処理に使う

タグの書き方ルール

HTMLタグには守るべき基本ルールがあります。

開始タグと終了タグ

ほとんどのタグは開始タグと終了タグのペアで使います。

<p>これは段落です。</p>
<h1>見出しテキスト</h1>
<a href="https://example.com">リンクテキスト</a>

自己終了タグ（空要素）

内容を持たないタグは開始タグのみで完結します。

<img src="photo.jpg" alt="写真の説明">
<br>
<hr>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

タグのネスト（入れ子）

タグは正しい順序でネストする必要があります。開いたタグは同じ順序で閉じます。

<!-- 正しいネスト -->
<ul>
  <li><a href="/">ホーム</a></li>
  <li><a href="/about">会社概要</a></li>
</ul>

<!-- 誤ったネスト（交差している） -->
<ul><li><a href="/">ホーム</li></a></ul>

⚠️ タグの閉じ忘れに注意: タグを閉じ忘れると、それ以降のHTML全体がそのタグの中にある扱いになり、レイアウトが大きく崩れます。VSCodeのAuto Rename Tag拡張機能を使うと、閉じタグの管理が楽になります。

🏋️実践ワーク

以下のワークを実施してください。

◆HTML雛形を作る: VSCodeで「!」→Tabキーを押し、HTML5の雛形を自動生成する。lang属性を「ja」に変更し、titleとdescriptionメタタグを自分のサイト想定で記入する。
◆セマンティック構造を書く: body内にheader・nav・main・section・footer の5つのセマンティックタグを使ったページ骨格を作る。各タグの中にはh1やh2でテキストだけ入れた状態でよい。
◆よく使うタグを実際に書く: h1〜h3・p・ul/li・ol/li・a・img タグを使って、自己紹介ページのHTMLを作る。LiveServerで表示を確認する。
◆DevToolsで確認: 作ったHTMLをChromeで開き、DevToolsのElementsパネルで各タグがツリー構造になっていることを確認する。h1タグをクリックして、右側のStylesで適用されているスタイルを確認する。

📝まとめ

HTMLは<!DOCTYPE html>・<html>・<head>・<body>の4つの骨格から構成されます。headには文字コード・viewport・titleなどのメタ情報を、bodyには実際に表示するコンテンツを記述します。セマンティックタグを使うことで、SEOとアクセシビリティが向上します。実務でよく使うタグ20選を押さえておけば、基本的なページは作れます。次のレッスンではテキスト・リスト・リンク・画像タグの詳しい使い方を学びます。

理解度チェック

3問

全問正解でこのレッスンが「完了」になり、コースの全レッスンを完了すると修了証が発行されます。解説つき・何度でも挑戦できます。

Q1.サイドバーの関連リンクや広告エリアをマークアップするのに適したタグはどれですか。
Q2.<div id="nav">を<nav>に書き換える主な利点として、本文に沿うものはどれですか。
Q3.ページの一部で日本語が文字化けしています。head内でまず確認すべき点はどれですか。

すべての問題に答えると押せます

「HTML/CSSコーディング入門」全10レッスンを無料で修了しよう

✓ 理解度チェックの採点と、合格レッスンの記録
✓ 全レッスン合格で修了証を発行（URLでシェア・LinkedInに追加できます）
✓ 全レッスンの解説動画と、続きから再開できる学習ダッシュボード

無料で受講をはじめる（1分）

完全無料・クレジットカード不要