イントロダクション

この記事では、HTML（HyperText Markup Language）の基本をカバーします。ウェブ開発の基礎であるHTMLを理解し、基本的なコードを書けるようになることが目標です。この記事は、プログラミング経験が全くない初心者を対象としています。

目次

HTMLとは？
開発環境の設定
基本的なHTML構造
よく使われるHTMLタグ
HTMLの属性
ブロック要素とインライン要素
要素のネスト
セマンティックHTML
実践例

1. HTMLとは？

HTMLはHyperText Markup Languageの略で、ウェブページを作成するための標準言語です。HTMLはウェブページの構造を記述し、ブラウザにコンテンツの表示方法を指示します。

キーポイント:

HTMLはプログラミング言語ではなく、マークアップ言語です。
タグを使ってウェブコンテンツを構造化します。
ブラウザはHTMLを解釈してウェブページを表示します。

2. 開発環境の設定

HTMLを書くためには、テキストエディタとウェブブラウザが必要です。おすすめのテキストエディタはVisual Studio Code（VS Code）です。

VS Codeのインストール手順:

Visual Studio Codeのウェブサイトにアクセスします。
使用しているOSに適したバージョンをダウンロードしてインストールします。
VS Codeを開き、.html拡張子の新しいファイルを作成します。

3. 基本的な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>私のウェブサイトへようこそ</h1>
    <p>これは段落です。</p>
</body>
</html>

説明:

<!DOCTYPE html>: ドキュメントの種類とHTMLのバージョンを宣言します。
<html>: HTMLドキュメントのルート要素です。
<head>: ドキュメントに関するメタ情報を含みます。
<meta charset="UTF-8">: ドキュメントの文字エンコーディングを設定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: ページがすべてのデバイスで応答性を持つようにします。
<title>: ドキュメントのタイトルを設定します。
<body>: ウェブページの表示コンテンツを含みます。

4. よく使われるHTMLタグ

HTMLはさまざまなタグで構成されており、それぞれ特定の目的があります。以下はよく使われるタグの例です:

見出し

<h1>これは見出しです</h1>
<h2>これはサブ見出しです</h2>
<h3>これはさらに小さい見出しです</h3>

段落

<p>これは段落です。</p>

リンク

<a href="https://www.example.com">例へのリンク</a>

画像

<img src="image.jpg" alt="画像の説明">

5. HTMLの属性

属性はHTML要素に追加情報を提供します。常に開始タグに含まれ、通常はname="value"のペアで構成されます。

例:

リンクタグのhref属性はリンク先を定義します。
画像タグのsrcとalt属性は画像ソースと代替テキストを指定します。

<a href="https://www.example.com" target="_blank">新しいタブで例を開く</a>
<img src="image.jpg" alt="美しい風景">

6. ブロック要素とインライン要素

HTML要素はブロック要素とインライン要素に分類されます。

ブロック要素:

常に新しい行から始まります。
例: <div>, <p>, <h1>, <ul>。

インライン要素:

新しい行から始まりません。
例: <a>, <span>, <img>。

7. 要素のネスト

HTML要素は他の要素の中にネストすることができます。これは複雑なウェブページを作成するために不可欠です。

例:

<p>これは<strong>ネストされた</strong>要素です。</p>

8. セマンティックHTML

セマンティックHTMLは、単なる見た目ではなく、ウェブページに意味を持たせます。セマンティックタグを使用することで、ページのアクセシビリティとSEOが向上します。

例:

<header>: ドキュメントやセクションのヘッダーを定義します。
<nav>: ナビゲーションリンクのセットを定義します。
<article>: 独立した自己完結型のコンテンツを定義します。
<footer>: ドキュメントやセクションのフッターを定義します。

9. 実践例

例1: 簡単なウェブページの作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私の簡単なページ</title>
</head>
<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 id="home">
            <h2>ようこそ</h2>
            <p>これはホームセクションです。</p>
        </article>
        <article id="about">
            <h2>アバウト</h2>
            <p>これはアバウトセクションです。</p>
        </article>
        <article id="contact">
            <h2>コンタクト</h2>
            <p>これはコンタクトセクションです。</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2024 私の簡単なページ</p>
    </footer>
</body>
</html>

例2: 画像の埋め込み

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画像の例</title>
</head>
<body>
    <h1>画像の埋め込み</h1>
    <img src="image.jpg" alt="美しい風景">
</body>
</html>

まとめ

お疲れ様です！！HTMLの基本を学びました。これらの基礎を使って、ウェブページを作成し始めることができます。定期的に練習し、複雑で美しいウェブサイトを作成できるようになりましょう。さらに学びたい場合は、CSS（Cascading Style Sheets）やJavaScriptを探索し、ウェブページの機能と外観を向上させましょう。