Chapter 1: HTML の基本

HTML（HyperText Markup Language）は，Web ページの構造を表現するための言語です。
文章の見出しや段落，画像，リンクなど，画面に表示する要素をタグで囲んで記述します。

HTML 文書の骨組み

HTML ファイルは次のような基本構造を持ちます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>ページタイトル</title>
  </head>
  <body>
    <!-- ここに表示したい内容を書く -->
  </body>
</html>

<!DOCTYPE html> は「この文書は HTML5 です」という宣言です。
<head> にはページ設定（タイトルや文字コードなど）を記述します。
<body> には実際に表示される要素を記述します。

ハンズオン：自己紹介ページを作る

fes-training/html-css フォルダに index.html を作ります。
次のコードを入力し，ブラウザで開いてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>自己紹介</title>
  </head>
  <body>
    <header>
      <h1>こんにちは！</h1>
      <p>大学祭実行委員会システム部門の あなたの名前 です。</p>
    </header>

    <main>
      <section>
        <h2>趣味</h2>
        <ul>
          <li>写真撮影</li>
          <li>カフェ巡り</li>
          <li>プログラミング学習</li>
        </ul>
      </section>

      <section>
        <h2>今年やりたいこと</h2>
        <ol>
          <li>大学祭サイトの改善</li>
          <li>新しいデザインの提案</li>
          <li>React でアプリを作る</li>
        </ol>
      </section>
    </main>

    <footer>
      <p>連絡は <a href="mailto:example@example.com">メール</a> まで！</p>
    </footer>
  </body>
</html>

ブラウザで表示して，見出しやリストが期待どおりに表示されるか確認します。

よく使うタグ

タグ	役割	例
`<h1>`〜`<h6>`	見出し	ページタイトルは `<h1>`
`<p>`	段落（文章）	説明文や本文
`<a>`	リンク	別ページやメールへのリンク
`<img>`	画像	`src` 属性でファイルを指定
`<section>`	セクション（まとまり）	ページの大きな区切り
`<header>/<footer>`	ヘッダー・フッター	ページ上部・下部の共通要素

Tip

タグは意味（セマンティクス）を意識して選ぶと，検索エンジンやスクリーンリーダーにも優しいページになります。

練習課題

<nav> タグを使って，ページ上部にリンクの一覧（例：ホーム / 活動内容 / メンバー）を追加してみましょう。
<figure> と <figcaption> を使って，写真と説明文を表示してみましょう。

次へ進む

HTML の骨組みができたら，Chapter 2: CSS で見た目を整えるへ進み，デザインを調整していきます。