HTMLの基礎 | 初心者向けWEB制作講座

HTMLの基礎

こんにちは！今回はWEBページの骨組みとなるHTMLについて学んでいきましょう。難しく考える必要はありません。HTMLは、みなさんがよく使う文書作成ソフトよりも簡単かもしれませんよ！

1. HTMLとは何か

HTML（HyperText Markup Language）は、WEBページの構造を定義するためのマークアップ言語です。文書の各部分が「何であるか」を示すタグを使って構成されています。

マークアップ言語とは？ 普通のテキストに「これは見出しです」「これは段落です」などの印（マーク）をつけるための言語です。HTMLでは <h1> や <p> などのタグを使って、テキストに意味を与えます。

HTMLファイルは拡張子が「.html」または「.htm」で、テキストエディタで編集できます。メモ帳でも編集可能ですが、Visual Studio CodeやAtomなどのコードエディタを使うと便利です。

2. 基本的なタグと構造

HTMLの基本構造

すべてのHTMLドキュメントは、基本的に以下の構造を持っています：

        <!DOCTYPE html>

        <html lang="ja">

        <head>

          <meta charset="UTF-8">

          <title>ページのタイトル</title>

        </head>

        <body>

          <!-- ここに表示したいコンテンツを書きます -->

          <h1>こんにちは、世界！</h1>

          <p>これは私の最初のウェブページです。</p>

        </body>

        </html>

各部分の説明：

<!DOCTYPE html> - このファイルがHTML5であることを宣言
<html> - HTMLドキュメントの開始と終了を示す
<head> - メタ情報（ページのタイトル、文字コード、CSSの読み込みなど）を含む部分
<body> - 実際にブラウザに表示される内容を含む部分

よく使うHTMLタグ

HTMLには多くのタグがありますが、まずは基本的なものから見ていきましょう：

見出し。h1が最も大きく、h6が最も小さい。

<p>

段落。テキストのかたまりを示す。

<a>

リンク。href属性にURLを指定する。例：<a href="https://example.com">リンクテキスト</a>

<img>

画像。src属性に画像のパスを指定する。例：<img src="image.jpg" alt="画像の説明">

箇条書きリスト。<ul>がリスト全体を囲み、<li>が各項目を示す。

番号付きリスト。<ol>がリスト全体を囲み、<li>が各項目を示す。

<div>

区分け。コンテンツをグループ化するための汎用コンテナ。

<span>

インラインの区分け。テキストの一部をグループ化するために使用。

タグの基本ルール：

多くのタグは開始タグ（<タグ名>）と終了タグ（</タグ名>）のペアで使用
中身を持たないタグ（<img>、<br>、<hr>など）は終了タグが不要
タグは入れ子にできるが、交差させてはいけない（<b><i>...</b></i> は× 、<b><i>...</i></b> は○）

属性について

タグには「属性」と呼ばれる追加情報を設定できます。

代表的な属性の例：

id - 要素の一意の識別子
class - 要素のスタイル分類
style - インラインスタイル
src - 画像や動画などのファイルパス
href - リンク先のURL
alt - 画像の代替テキスト

3. セマンティックHTML

「セマンティック」とは「意味的な」という意味です。セマンティックHTMLとは、内容の意味を明確に伝えるタグを使用することです。

なぜセマンティックHTMLが重要か？

検索エンジンがコンテンツを理解しやすくなる（SEO向上）
スクリーンリーダーなどの支援技術との互換性が高まる（アクセシビリティ向上）
コードが整理され、メンテナンスしやすくなる
異なるデバイスでの表示に適応しやすくなる

セマンティックタグの例

ページや区画のヘッダー部分

<nav>

ナビゲーションメニュー

<main>

メインコンテンツ

独立したコンテンツ（ブログ記事、ニュース記事など）

関連するコンテンツのグループ

<aside>

補足情報（サイドバーなど）

フッター情報（著作権、連絡先など）

セマンティックHTMLの例：

            <!-- 非セマンティックな書き方 -->

            <div class="header">

              <div class="navigation">...</div>

            </div>

            <div class="main-content">...</div>

            <div class="footer">...</div>

            <!-- セマンティックな書き方 -->

            <header>

              <nav>...</nav>

            </header>

            <main>...</main>

            <footer>...</footer>

4. 実践：シンプルなプロフィールページの作成

ここまで学んだことを活かして、簡単なプロフィールページを作ってみましょう：

        <!DOCTYPE html>

        <html lang="ja">

        <head>

          <meta charset="UTF-8">

          <title>私のプロフィール</title>

        </head>

        <body>

          <header>

            <h1>山田太郎</h1>

            <p>Web開発初心者 / 猫好き / 読書家</p>

          </header>

          <main>

            <section>

              <h2>自己紹介</h2>

              <p>はじめまして、山田太郎です。現在WEB制作を勉強中です。

              このページは私のHTMLの練習作品です。</p>

              <img src="profile.jpg" alt="山田太郎の写真">

            </section>

            <section>

              <h2>趣味</h2>

              <ul>

                <li>プログラミング</li>

                <li>読書</li>

                <li>映画鑑賞</li>

              </ul>

            </section>

            <section>

              <h2>連絡先</h2>

              <p>メール: <a href="mailto:yamada@example.com">yamada@example.com</a></p>

              <p>Twitter: <a href="https://twitter.com/yamada">@yamada</a></p>

            </section>

          </main>

          <footer>

            <p>© 2025 山田太郎 All Rights Reserved.</p>

          </footer>

        </body>

        </html>