現代のインターネット社会では、Webページは情報発信の重要な手段となっています。
そのWebページを構築する基本的な技術が、HTML (HyperText Markup Language) です。
本カリキュラムでは、HTMLの基本構造やよく使うタグを学び、シンプルなWebページを自分で作成できるスキルを身につけます。
初めてHTMLに触れる方でも、基礎をしっかり理解し、楽しく学べる内容になっています。一歩ずつ、Web開発の世界へ足を踏み入れましょう！
1.HTMLの基本構造
HTMLとは何か
HTML（HyperText Markup Language）は、Webページを作成するための言語で、ページ内のコンテンツ（文章、画像、リンク、表など）を構造化してブラウザに指示します。
- HyperText: 他の文書やリソースとリンクを張る機能を指します。
- Markup Language: 文書に「意味」や「役割」を付けるためのマークアップ（タグ）を使う言語です。
HTMLは、単独ではデザインや動作を持ちません。
見た目を整える CSS（Cascading Style Sheets）や、動きを加える JavaScript と組み合わせて使われます。
HTMLドキュメントの全体構造の理解
HTMLは一つの文書（ファイル）として構成され、以下のような基本構造を持っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>これはHTMLの基本構造の例です。</p>
</body>
</html>構成要素の概要
- <!DOCTYPE html>:
• HTML5文書であることをブラウザに伝える宣言。
• これがないと、ブラウザは古い動作モード（互換モード）でページをレンダリングする場合があります。 - <html>:
• 文書全体を囲むタグ。HTMLのルート要素です。
• lang="ja" のように、ページの言語を指定する属性を持たせることができます。 - <head>:
• ページの設定やメタ情報を記述する部分。
• ユーザーには直接表示されませんが、検索エンジンやブラウザにとって重要な情報を含みます。 - <body>:
• 実際にユーザーがブラウザで目にするコンテンツを記述する部分。
タグの役割
1. <html>タグ
- ページ全体を包み込む、HTML文書の最上位タグ。
• 主な特徴:
- 全てのHTMLコードはこのタグの内側に記述します。
- 属性例: lang（ページの言語設定）
- 例: lang="en" は英語、lang="ja" は日本語を表します。
2. <head>タグ
- 文書のヘッダー部分で、ページの設定や説明を記載。
- ユーザーが直接目にする内容ではなく、ブラウザや検索エンジンに情報を伝える役割を担います。
• よく使われる要素:
- <meta charset="UTF-8">: ページの文字コードを指定（一般的にUTF-8を使用）。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">:
- モバイルデバイスの表示を最適化するための設定。
- <title>: ページのタイトル（タブや検索結果に表示）。
- 外部リソース（CSSファイルやJavaScriptファイル）をリンクするためのタグ。
- 例: <link rel="stylesheet" href="style.css">
3. <body>タグ
- 実際のコンテンツを記述する部分。
• 主な役割:
- 見出しや段落、画像、リンクなど、ページに表示される全ての要素を含む。
- ページごとに異なる情報を記述します。
ページの土台となる仕組み
HTMLの基本構造は、Webページを正しく表示するための「土台」としての役割を果たします。
この構造をしっかり理解しておくことで、CSSやJavaScriptをスムーズに組み込むことが可能になります。
ポイント:
- 階層構造:
HTMLタグはネスト（入れ子）して使います。親子関係を意識して記述することで、文書の構造をわかりやすく整理します。 - 可読性:
タグを正しくインデントすることで、コードの読みやすさを保つことが重要です。
例:
<body>
<header>
<h1>サイトのタイトル</h1>
</header>
<main>
<section>
<h2>セクション1</h2>
<p>この部分は段落です。</p>
</section>
</main>
<footer>
<p>© 2024 サイト名</p>
</footer>
</body>HTMLの役割:
- ページを論理的に分割し、コンテンツを階層的に整理。
- 他の技術（CSSやJavaScript）と連携することで、見た目や動作を追加。
2.<!DOCTYPE>の意味
<!DOCTYPE>の役割と歴史的背景
<!DOCTYPE>の役割
<!DOCTYPE>は、HTMLドキュメントの最初に記述される宣言で、文書の種類（Document Type）をブラウザに伝えるためのものです。
• 主な目的:
- HTMLバージョンの指定: ドキュメントがどのHTML規格に基づいているかを示します。
- ブラウザのレンダリングモードの設定:
• 標準モード (Standards Mode): 現代的な仕様に基づいて正確にページを描画するモード。
• 互換モード (Quirks Mode): 古いブラウザとの互換性を維持するためのモード。デフォルトの動作が異なります。 - <!DOCTYPE>がない場合、ブラウザは互換モードで動作する可能性が高く、意図したデザインや動作が崩れることがあります。
歴史的背景
- HTML 2.0 (1995年):
HTML標準の初期段階。この頃は単純なWebページが中心で、<!DOCTYPE>の役割は小さかった。 - HTML 4.01 (1999年):
多くのWebページが複雑化し、ブラウザ間の互換性問題が顕著に。<!DOCTYPE>が重要視される。 - XHTML 1.0 (2000年):
XMLをベースにした厳密なHTML形式が提案され、正確な文書型宣言が必要に。 - HTML5 (2014年):
現在の標準。<!DOCTYPE>がシンプルになり、互換性が改善。
HTML5の<!DOCTYPE>例:
<!DOCTYPE html>• 非常に簡潔で、標準モードを確実に利用可能。
• 過去のバージョンと比較して柔軟性が増しています。
3. <head>と<body>の使い方
<head> に書くべき内容
<head>タグはHTML文書の先頭部分にあり、ページ全体の設定や情報を記載します。
この情報は、ブラウザや検索エンジンにとって重要ですが、ユーザーが直接見ることはありません。
主な役割
- メタ情報の定義（文字コード、ページ説明など）
- ページのタイトル設定
- CSSやJavaScriptなどの外部リソースのリンク
- SEOやソーシャルメディア対応の情報追加
記載する内容
1. 文字コードの指定
<meta charset="UTF-8">• ページが正しく表示されるために文字コードを設定します。
• 通常、UTF-8が推奨されます。
2. レスポンシブデザインの設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">3. ページタイトルの指定
<title>サンプルページ</title>• タブや検索エンジンの結果に表示されるページタイトル。
• 簡潔かつわかりやすいタイトルを設定することが重要。
4. 外部リソースのリンク
• CSSの読み込み
<link rel="stylesheet" href="styles.css">• Webページのデザインを定義するスタイルシートを読み込みます。
• JavaScriptの読み込み
<script src="script.js" defer></script>• ページの動的な機能を追加します。
• defer属性を付けると、ページの読み込み完了後に実行されます。
5. SEO関連のメタ情報
<meta name="description" content="このページはHTMLの基本を解説しています。">
<meta name="keywords" content="HTML, 基本, 入門">• 検索エンジン向けの情報を記述。
• ページ内容を簡潔に説明することで、検索エンジンでの評価が向上します。
6. ソーシャルメディア向け情報
• FacebookやTwitterなどでの表示を調整します。
<meta property="og:title" content="サンプルページ">
<meta property="og:description" content="HTMLの基本を学べるページです。">
<meta property="og:image" content="sample.jpg"><body> に配置する要素
<body>タグには、ユーザーがブラウザ上で目にするコンテンツを記述します。
見出し、段落、リスト、画像、リンク、フォームなど、あらゆる表示要素が含まれます。
主な役割
- ユーザーが実際に閲覧・操作するコンテンツを管理。
- 構造を明確にし、可読性の高いコードを書くことが重要。
記載する内容
1. 見出しと段落
• ページ構造を整理するために使用。
<h1>ページのタイトル</h1>
<p>これは段落の例です。</p>2. リスト
• 順序ありリスト（<ol>）や順序なしリスト（<ul>）を使用。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>3. 画像の挿入
• 画像をページに表示。
<img src="image.jpg" alt="サンプル画像">• alt属性は、画像が表示されない場合に代替テキストを表示するためのもの。
4. リンク
• 外部リンクや内部リンクを作成。
<a href="https://example.com">外部リンク</a>
<a href="contact.html">内部リンク</a>5. フォーム
• ユーザーから情報を取得するためのフォームを作成。
<form action="submit.php" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<button type="submit">送信</button>
</form>6. セクション分け
• HTML5では、コンテンツをセマンティックに分けるためのタグが利用可能。
- <header>: ページやセクションのヘッダー。
- <main>: 主なコンテンツ。
- <footer>: フッター部分。
- <section>: トピックごとのセクション。
<header>
<h1>サイトのヘッダー</h1>
</header>
<main>
<section>
<h2>セクションタイトル</h2>
<p>セクション内容</p>
</section>
</main>
<footer>
<p>© 2024 サイト名</p>
</footer>実際に表示されるコンテンツの設計
設計のポイント
- 階層構造:
見出しタグ（<h1>～<h6>）やセクションタグでコンテンツを整理。 - レスポンシブデザイン:
コンテンツがどのデバイスでも見やすいように構造化。 - アクセシビリティ:
スクリーンリーダーやキーボード操作でも使いやすい設計。
簡単なページ例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>はじめてのHTML</h1>
</header>
<main>
<section>
<h2>HTMLの基本</h2>
<p>HTMLはWebページの骨組みを作るための言語です。</p>
</section>
</main>
<footer>
<p>© 2024 サンプルサイト</p>
</footer>
</body>
</html>4.リンク・画像・フォームの基本
リンク (<a>)
リンクを作成するために使用するタグです。
リンク先を指定し、ユーザーが他のページやリソースに移動できるようにします。
基本構造
<a href="リンク先URL">リンクのテキストや内容</a>- href属性:
リンク先のURLを指定します。
外部リンクと内部リンクの違い
1. 外部リンク
• 他のWebサイトやドメインに移動するリンク。
<a href="https://example.com">外部リンク</a>• 新しいタブで開く場合、target="_blank"を使用。
<a href="https://example.com" target="_blank">新しいタブで外部リンク</a>2. 内部リンク
• 同じサイト内の別のページやセクションに移動するリンク。
<a href="about.html">内部リンク</a>アンカーリンクの使い方
アンカーリンクは、同じページ内の特定の位置に移動するために使用します。
• 基本例:
<a href="#section1">セクション1へ移動</a>
<a href="#section2">セクション2へ移動</a>
<h2 id="section1">セクション1</h2>
<p>セクション1の内容です。</p>
<h2 id="section2">セクション2</h2>
<p>セクション2の内容です。</p>画像 (<img>)
画像をWebページに表示するためのタグです。
基本構造
<img src="画像のURL" alt="画像の説明">- src属性:
画像のパスやURLを指定。 - alt属性:
画像が表示できない場合に代替テキストを表示。
アクセシビリティやSEOに重要。 - width / height 属性:
画像の幅と高さを指定（単位はピクセル）。
例
<img src="example.jpg" alt="サンプル画像" width="300" height="200">効率的な画像表示のコツ
1. 適切なサイズの画像を使用
• 必要以上に大きな画像は読み込み時間が長くなります。
2. Web用画像形式
• 一般的な形式: JPEG（写真向き）、PNG（高画質）、WebP（軽量で高画質）。
3. レスポンシブ対応
• CSSを活用して画面サイズに応じた画像を表示。
<img src="example.jpg" alt="サンプル画像" style="max-width: 100%; height: auto;">フォーム (<form>)
ユーザーから情報を取得するための入力フィールドを提供します。
基本構造
<form action="送信先URL" method="GETまたはPOST">
<!-- フォームの内容 -->
</form>- action属性:
フォーム送信先のURL。 - method属性:
データ送信方法。 - GET:
データをURLに追加して送信（軽量でクエリ用）。 - POST:
データをボディに含めて送信（安全性が高い）。
入力フィールド（<input>）の種類
1. テキスト入力
<label for="name">名前:</label>
<input type="text" id="name" name="name">2. メールアドレス入力
<label for="email">メール:</label>
<input type="email" id="email" name="email">3. パスワード入力
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">4. ラジオボタン
<label>
<input type="radio" name="gender" value="male"> 男性
</label>
<label>
<input type="radio" name="gender" value="female"> 女性
</label>5. チェックボックス
<label>
<input type="checkbox" name="subscribe" value="yes"> メールマガジンを受け取る
</label>6. 送信ボタン
<button type="submit">送信</button>フォームの例
以下は、名前とメールアドレスを取得して送信するシンプルなフォームです。
<form action="submit.php" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">メール:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">送信</button>
</form>注意点
- バリデーション:
required属性やHTML5の入力タイプを活用して、ユーザーの入力をチェック。 - セキュリティ:
フォームデータはサーバー側でさらに厳密に検証する必要があります。
まとめ
本カリキュラムでは、HTMLの基本構造と重要なタグを学び、シンプルなWebページを作成する流れを体験しました。
HTMLはWeb開発の出発点です。
これを基礎に、CSSやJavaScriptを組み合わせれば、さらに魅力的なページを作れるようになります。
次のステップでは、学んだ内容を応用し、自分だけのオリジナルWebページに挑戦してみてください！
