LTech

レッスン1: HTMLでできることと基本ルールを理解しよう

HTMLの基本を学び、初めてのWebページを作成しましょう。

🎯 学習目標

  • HTMLが何をするための言語かを理解する
  • 基本的なHTML文書の構造を理解する
  • HTMLコメントの用途について理解する

📘 目次

  1. HTMLとは何か？
  2. HTML文書の基本構造
  3. HTML文書の要素
  4. HTMLコメントについて
  5. 今日のまとめ
  6. 演習：見出しと段落を追加してみよう
  7. 理解度チェック

📚 レッスン

1. HTMLとは何か？

HTML（HyperText Markup Language）は、Webページを構成するためのマークアップ言語です。

HTMLを使って、見出しや文章、画像、リンクなどを「この部分は見出しです」「ここはリンクです」と意味づけ（= マークアップ）します。

✅ HTMLの役割

  • コンピューターが情報を正確に理解できるように文書に意味付けする

2. HTML文書の基本構造

以下がHTML文書の基本的な構造です。HTML文書は必ず <!DOCTYPE>, <html>, <head>, <body> の構造を持つ必要があります。 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>こんにちは、HTML！</h1>
    <p>これは最初のHTMLページです。</p>
  </body>
</html>

📌 解説

タグ 意味
<!DOCTYPE html> HTML5で書かれていることをブラウザに伝える
<html> HTML文書のルート（全体）を囲む
<head> メタ情報（文字コード、タイトルなど）を含む
<meta charset="UTF-8"> 文字コードをUTF-8に指定（日本語対応）
<title> ブラウザのタブに表示されるタイトル
<body> 実際にブラウザに表示される本文部分

3. HTML文書の要素

「要素（element）」とはWebページの内容を構造化するための最小の単位です。たとえば「見出し」「段落」「画像」「リンク」などがすべて「要素」です。

要素の基本構造

<タグ名 属性="値">内容</タグ名>

例：

<a href="index.html">これはリンクです。</a>
  • <a>：開始タグ
  • href="index.html"：属性と値
  • これはリンクです。：要素の中身（コンテンツ）
  • </a>：終了タグ

4. HTMLコメントについて

HTMLでは、コードの中にコメントを記述することができます。コメントはブラウザに表示されず、コードの説明や備忘録として使用されます。

コメントの書き方

<!-- これはHTMLのコメントです -->

コメントの使い方の例

<!-- ヘッダーセクション -->
<header>
  <h1>サイトタイトル</h1>
</header>

<!-- メインコンテンツ -->
<main>
  <p>ここに本文を書きます。</p>
</main>

<!-- TODO: フッターにSNSリンクを追加する -->
<footer>
  <p>© 2025 私のウェブサイト</p>
</footer>

コメントの役割

  • コード説明：他の開発者（または将来の自分）のために、コードの目的や動作を説明する
  • デバッグ：一時的にコードの一部を無効にして、問題を特定する
  • TODOメモ：後で実装予定の機能や修正箇所を記録する
  • セクション区切り：大きなHTMLファイルを論理的なセクションに分けて視覚的に整理する

覚えておきましょう：コメントはブラウザで表示されませんが、ページのソースコードを表示すると誰でも読むことができます。そのため、機密情報（パスワードなど）をコメントに書かないようにしましょう。

今日のまとめ

  • HTMLはWebページの構造を定義する言語
  • HTML文書は必ず <!DOCTYPE>, <html>, <head>, <body> の構造を持つ
  • HTML要素は <タグ名>内容</タグ名> の形式で書く

📚 リファレンス

このレッスンで学んだHTMLタグの詳細については、リファレンスページで確認できます。

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

1. 見出しと段落を追加してみよう

以下のように、見出しと段落を追加してみましょう！

<h1>今日の学び</h1>
<p>HTMLはWebページの構造を作るための言語。</p>

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. HTMLは何の略ですか？

2. bodyタグの説明について正しいものを選んでください

3. ブラウザのタブに表示されるタイトルを設定するタグは？

📘 次回予告

「HTMLの基本タグ：見出し・段落・リンク・画像」を学びます。実際に情報をページに表示して、よりリッチな構造にしていきましょう！

« チュートリアル一覧へ戻る レッスン2へ進む »

インラインエディタ