開発 2024.02.25

【初心者向け】HTMLの基本を学ぶためのサンプルコードと解説

HTML（HyperText Markup Language）は、ウェブページを構築するための基本的なマークアップ言語です。この記事では、HTMLの基本を理解するために役立つサンプルコードと、その解説を提供します。初めてHTMLを学ぶ方でも、この記事を通じて基本的なタグの使い方や構造を理解できるようになります。

1 1. HTMLの基本構造
- 1.1 解説:
2 2. リストの作成
- 2.1 解説:
3 3. 画像の埋め込み
- 3.1 解説:
4 4. リンクの作成
- 4.1 解説:
5 5. テーブルの作成
- 5.1 解説:
6 まとめ

1. HTMLの基本構造

HTMLドキュメントは、基本的な構造を持っています。以下は、最もシンプルなHTMLページのサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルHTMLページ</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これはサンプルのHTMLページです。</p>
</body>
</html>

解説:

<!DOCTYPE html>: ドキュメントのタイプを宣言します。HTML5ではこれが標準です。
<html lang="ja">: HTMLドキュメントの開始を示し、言語を日本語（ja）に設定します。
<head>: メタデータやタイトルを含むセクションです。
<meta charset="UTF-8">: 文字エンコーディングを指定します。UTF-8が一般的です。
<title>: ブラウザのタブに表示されるページのタイトルを指定します。
<body>: 実際にブラウザに表示されるコンテンツを含むセクションです。
<h1>: ページの見出しを指定します。
<p>: 段落を指定します。

2. リストの作成

HTMLでは、リストを作成するためのタグも用意されています。以下は、順序付きリストと順序なしリストのサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リストのサンプル</title>
</head>
<body>
    <h2>順序付きリスト</h2>
    <ol>
        <li>アイテム1</li>
        <li>アイテム2</li>
        <li>アイテム3</li>
    </ol>

    <h2>順序なしリスト</h2>
    <ul>
        <li>アイテムA</li>
        <li>アイテムB</li>
        <li>アイテムC</li>
    </ul>
</body>
</html>

解説:

<ol>: 順序付きリスト（番号付きリスト）を作成します。
<ul>: 順序なしリスト（箇条書きリスト）を作成します。
<li>: リストアイテムを示します。

3. 画像の埋め込み

HTMLを使って画像をウェブページに埋め込むことができます。以下はそのサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>画像のサンプル</title>
</head>
<body>
    <h2>画像の埋め込み</h2>
    <img src="https://www.example.com/image.jpg" alt="サンプル画像" width="300">
</body>
</html>

解説:

<img>: 画像を表示するためのタグです。
src: 画像のURLを指定します。
alt: 画像が表示されない場合に表示される代替テキストを指定します。
width: 画像の幅を指定します（高さは自動的に調整されます）。

4. リンクの作成

HTMLでは、他のページやサイトへのリンクを簡単に作成できます。以下はリンクのサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リンクのサンプル</title>
</head>
<body>
    <h2>リンクの作成</h2>
    <p>詳しくは<a href="https://www.example.com">こちら</a>をご覧ください。</p>
</body>
</html>

解説:

<a>: ハイパーリンクを作成するためのタグです。
href: リンク先のURLを指定します。

5. テーブルの作成

データを表形式で表示するためのテーブルも、HTMLで簡単に作成できます。以下はそのサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テーブルのサンプル</title>
</head>
<body>
    <h2>テーブルの作成</h2>
    <table border="1">
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>職業</th>
        </tr>
        <tr>
            <td>山田 太郎</td>
            <td>30</td>
            <td>エンジニア</td>
        </tr>
        <tr>
            <td>佐藤 花子</td>
            <td>25</td>
            <td>デザイナー</td>
        </tr>
    </table>
</body>
</html>