テクノロジー、ビジネス、生活を網羅するブログ。ITスキル、経営・財務知識、生産性向上ツールなど、幅広いトピックで読者の成長をサポート。最新トレンドと実用的な情報を提供。IT shop by Saka Blog

ウェブサイトを作成する上で欠かせないのがHTMLです。

この記事では、HTMLの基本的な構造から実践的な使い方まで、初心者の方にもわかりやすく解説します。

自分だけのウェブページを作成する第一歩を踏み出しましょう。

しおり

HTMLとは？基本構造を詳しく理解しよう
1. HTMLの基本構造
2. HTMLの書き方：タグ、要素、属性
HTMLの使い方：主要なタグとその役割
セマンティックHTML：意味のある構造化
フォームの作成：ユーザー入力の受け付け
テーブルの作成：データの整理
マルチメディアの埋め込み
メタタグとSEO
レスポンシブデザインの基礎
HTML5の新機能
テキストエディターでHTMLファイルを作成する方法
1. テキストエディター
2. HTMLファイルを作成
HTMLの学習方法とリソース
まとめ

HTMLとは？基本構造を詳しく理解しよう

HTMLは「Hypertext Markup Language」の略で、ウェブページの構造を定義するためのマークアップ言語です。

テキスト、画像、リンクなどの要素を配置し、ブラウザがそれらをどのように表示するかを指示します。

HTMLの基本構造

HTMLの基本構造は以下のようになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    <h1>こんにちは、HTML世界！</h1>
    <p>ここにコンテンツが入ります。</p>
</body>
</html>

この構造を詳しく説明しましょう。

<!DOCTYPE html>: これはHTMLのバージョン宣言です。現在のHTML5では、この簡単な宣言で十分です。

<html lang="ja">: HTML文書の開始を示します。lang属性は文書の主要言語を指定します。jaは日本語、enは英語など。

<head>: ページのメタ情報を含むセクションです。ここには、文字コード指定、タイトル、スタイルシートへのリンクなどが含まれます。

<meta charset="UTF-8">: 文字エンコーディングを指定します。UTF-8は、ほとんどの言語の文字を表現できる広く使用されている文字コードです。

<title>: ブラウザのタブに表示されるページタイトルを指定します。

<body>: 実際にウェブページに表示されるコンテンツを含むセクションです。

HTMLの書き方：タグ、要素、属性

HTMLは、タグ、要素、属性という3つの主要な概念で構成されています。

タグ：
タグは、< と> で囲まれたキーワードです。開始タグと終了タグがあり、終了タグには/が付きます。
例：<p> (開始タグ)と</p> (終了タグ)

要素：
開始タグ、コンテンツ、終了タグを合わせて要素と呼びます。
例：<p>これは段落です。</p>
例文全体が一つの段落要素です。

属性：
タグに追加情報を与えるものです。開始タグの中に記述し、名前と値のペアで指定します。
例：<img src="image.jpg" alt="画像の説明">
ここで、srcとaltが属性名、それぞれの値が属性値です。例では image.jpgと画像の説明が属性値。

HTMLの使い方：主要なタグとその役割

HTMLでは、様々なタグを使ってコンテンツを構造化します。

以下に主要なタグとその使い方を詳しく紹介します。

見出し: <h1>から<h6>

   <h1>最も重要な見出し</h1>
   <h2>次に重要な見出し</h2>
   <h3>小見出し</h3>
   <h4>さらに小さい見出し</h4>
   <h5>かなり小さい見出し</h5>
   <h6>最も小さい見出し</h6>

見出しタグは文書の構造を示すために重要で、SEOにも影響します。

結果（ブラウザ）⇩

段落: <p>

   <p>これは段落のテキストです。長文を書く際に使用します。</p>

リンク: <a

   <a href="https://sollamu.com" target="_blank">新しいタブでリンクを開く</a>

target="_blank" 属性を使用すると、リンクを新しいタブで開くことができます。

結果（ブラウザ）⇩

新しいタブでリンクを開く

画像: <img>

   <img src="image.jpg" alt="美しい風景" width="300" height="200">

widthとheight属性でサイズを指定できます。

   <ul>
     <li>箇条書き項目1</li>
     <li>箇条書き項目2</li>
   </ul>

   <ol>
     <li>番号付きリスト項目1</li>
     <li>番号付きリスト項目2</li>
   </ol>

   <dl>
     <dt>用語1</dt>
     <dd>用語1の説明</dd>
     <dt>用語2</dt>
     <dd>用語2の説明</dd>
   </dl>

<ul>は順序なしリスト、<ol>は順序付きリスト、<dl>は定義リストです。

<li>はリスト項目 (List Item) を表す要素です。
<ul> (順序なしリスト)や <ol> (順序付きリスト) の中で個々の項目を表すために使用されます。
<li>は単独では使用できません。必ず<ul>または<ol>の子要素として記述する必要があります。

<dl> (定義リスト) では<li>の代わりに<dt> (定義語) と<dd> (定義の説明) を使用します。

結果（ブラウザ）⇩

強調とハイライト:

   <em>強調されたテキスト</em>
   <strong>さらに強調されたテキスト</strong>
   <mark>ハイライトされたテキスト</mark>

結果（ブラウザ）⇩

引用:

   <blockquote>
     <p>これは長い引用です。</p>
     出典：著者名
   </blockquote>
   <q>これは短い引用です。</q>

結果（ブラウザ）⇩

コード:

   <code>console.log("Hello, World!");</code>
   <pre><code>
   function greet(name) {
     console.log("Hello, " + name + "!");
   }
   </code></pre>

<pre> タグは、書式設定を保持します。

結果（ブラウザ）⇩

区切り線:

   <hr>

改行:

   <br>

html この文の後に改行が入ります。<br> ここから次の行です。

これらのタグを適切に組み合わせることで、豊かな構造のウェブページを作成できます。

セマンティックHTML：意味のある構造化

最近のHTMLでは、コンテンツの意味を明確にするセマンティックタグが重要視されています。

主なセマンティックタグには以下があります。

<header>: ページやセクションのヘッダー
<nav>: ナビゲーションリンク
<main>: メインコンテンツ
<article>: 独立したコンテンツ
<section>: コンテンツのセクション
<aside>: サイドバーや補足情報
<footer>: ページやセクションのフッター

セマンティックタグの使用例。

<body>
  <header>
    <h1>ウェブサイトのタイトル</h1>
    <nav>
      <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">私たちについて</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>記事のタイトル</h2>
      <p>記事の本文...</p>
    </article>

    <aside>
      <h3>関連情報</h3>
      <ul>
        <li><a href="#">関連記事1</a></li>
        <li><a href="#">関連記事2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 20XX ウェブサイト名. All rights reserved.</p>
  </footer>
</body>

結果（ブラウザ）⇩

これらのタグを適切に使用することで、検索エンジンの最適化（SEO）にも貢献し、ウェブサイトのアクセシビリティも向上します。

フォームの作成：ユーザー入力の受け付け

HTMLでは<form>タグを使ってユーザーからの入力を受け付けることができます。

以下は基本的なフォームの例です。

<form action="/submit" method="post">
  <fieldset>
    <legend>個人情報</legend>

    <label for="name">名前:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required>

    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" min="0" max="120">

    <label for="gender">性別:</label>
    <select id="gender" name="gender">
      <option value="">選択してください</option>
      <option value="male">男性</option>
      <option value="female">女性</option>
      <option value="other">その他</option>
    </select>
  </fieldset>

  <fieldset>
    <legend>お問い合わせ内容</legend>

    <label for="subject">件名:</label>
    <input type="text" id="subject" name="subject" required>

    <label for="message">メッセージ:</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <label>
      <input type="checkbox" name="agreement" required>
      プライバシーポリシーに同意します
    </label>
  </fieldset>

  <button type="submit">送信</button>
  <button type="reset">リセット</button>
</form>

この例では、テキスト入力、メールアドレス入力、数値入力、セレクトボックス、テキストエリア、チェックボックス、送信ボタン、リセットボタンを含む詳細なフォームを作成しています。

<fieldset> と <legend> を使用してフォームをグループ化し、構造を明確にしています。

結果（ブラウザ）⇩

テーブルの作成：データの整理

データを表形式で表示したい場合は、<table>タグを使用します。

以下は、より詳細なテーブルの例です。

<table border="1">
  <caption>従業員情報</caption>
  <thead>
    <tr>
      <th>ID</th>
      <th>名前</th>
      <th>部署</th>
      <th>入社年</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>山田太郎</td>
      <td>営業部</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>002</td>
      <td>佐藤花子</td>
      <td>開発部</td>
      <td>2018</td>
    </tr>
    <tr>
      <td>003</td>
      <td>鈴木一郎</td>
      <td>人事部</td>
      <td>2020</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">合計従業員数</td>
      <td>3名</td>
    </tr>
  </tfoot>
</table>

この例では、<caption>でテーブルのタイトルを付け、<thead>、<tbody>、<tfoot>を使用してテーブルの構造を明確にしています。

また、colspan属性を使用してセルの結合も行っています。

結果（ブラウザ）⇩

マルチメディアの埋め込み

HTMLでは画像だけでなく、音声や動画も埋め込むことができます。

以下に、より詳細な例を示します。

<!-- 画像の埋め込み -->
<figure>
  <img src="landscape.jpg" alt="美しい風景" width="500" height="300">
  <figcaption>山と湖の風景</figcaption>
</figure>

<!-- 音声の埋め込み -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<!-- 動画の埋め込み -->
<video width="640" height="360" controls poster="video-thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_ja.vtt" kind="subtitles" srclang="ja" label="日本語">
  Your browser does not support the video tag.
</video>

<!-- YouTubeの動画埋め込み -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

これらのタグを使用することで、ウェブページにリッチなマルチメディアコンテンツを追加できます。

<figure>と<figcaption>を使用して画像にキャプションを付けたり、<track>タグで動画に字幕を追加したりできます。

メタタグとSEO

HTMLの`<head>`セクション内に配置されるメタタグは、ウェブページに関する重要な情報を提供し、SEOに大きく影響します。

以下に、より詳細なメタタグの使用例を示します。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="当サイトは、HTMLの基礎から応用まで幅広く解説する初心者向けガイドです。">
  <meta name="keywords" content="HTML, ウェブ開発, プログラミング, 初心者ガイド">
  <meta name="author" content="H.Saka">
  <meta name="robots" content="index, follow">
  <meta property="og:title" content="HTMLマスターガイド">
  <meta property="og:description" content="HTML初心者のための包括的なガイドブック">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/html-guide">
  <meta name="twitter:card" content="summary_large_image">
  <title>HTMLマスターガイド - 初心者のための包括的解説</title>
  <link rel="canonical" href="https://example.com/html-guide">
</head>

これらのメタタグは、検索エンジンがページの内容を理解し、適切に検索結果に表示するのに役立ちます。

また、SNSでシェアされた際の表示内容も制御できます。

レスポンシブデザインの基礎

モバイルデバイスの普及に伴い、レスポンシブデザインが重要になっています。CSSと組み合わせて使用しますが、HTMLでも以下のようなタグで対応できます。

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 800px)" srcset="medium.jpg">
  <img src="small.jpg" alt="レスポンシブ画像" style="width:100%;">
</picture>

<video width="100%" controls>
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

この例では、画面サイズに応じて異なる画像を表示したり、ビデオや地図を画面幅に合わせて表示したりしています。

HTML5の新機能

HTML5では、新しい要素や属性が多数追加されました。

以下に、HTML5の特徴的な機能をいくつか紹介します。

セマンティック要素

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

グラフィックス関連

<canvas> Your browser does not support the canvas element. </canvas> 

<svg width="100" height="100"> 
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg>

マルチメディア関連

<audio>, <video>, <source>, <track>

フォーム関連

<input type="date">
<input type="email">
<input type="range" min="0" max="100" value="50">
<input type="search">
<input type="tel">
<input type="url">

その他の新要素：

<details>
  <summary>詳細を表示</summary>
  <p>ここに詳細な情報が表示されます。</p>
</details>

<progress value="70" max="100">70%</progress>

<meter value="0.6">60%</meter>

結果（ブラウザ）⇩

これらの新機能を活用することで、より豊かで対話的なウェブページを作成できます。

テキストエディターでHTMLファイルを作成する方法

HTMLファイルは、基本的なテキストエディターを使用して作成できます。

以下に、手順を詳しく説明します。

テキストエディター

テキストエディターを開く。

Windows: メモ帳 (Notepad)
Mac: テキストエディット (TextEdit)
より高度な機能が必要な場合は、Visual Studio Code、Cursor、Sublime Text、Atom、Notepad++などの専用エディターを使用することをお勧めします。

今回はWindows標準アプリのメモ帳を使います。

HTMLファイルを作成

新しいファイルを作成（HTMLの基本構造を記述）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私の最初のHTMLページ</title>
</head>
<body>
    <h1>こんにちは、htmlの世界へようこそ！</h1>
    <p>これは私の最初のHTMLページです。</p>
</body>
</html>

メモ帳⇩