本記事はあくまでHTMLの記法についての入門書です。実際にWebページを本格的に作成するためにはCSSやJavaScriptなどを併用する必要があるので、ぜひそちらも学習してみてください。

はじめに

はじめに、HTML は Web ページを作るための言語です。 Web ページはテキストや画像などの要素で構成されていますが、それらの要素の意味や役割を明確にするために HTML を使います。つまり、HTML は Web ページの構造を定義することができます。 HTML を学ぶことで、自分の Web ページを作成することができるようになります。

また、HTML は非常に重要な役割を果たしています。インターネット上には、世界中の人々が作成した Web ページが膨大な数存在していますが、これらの Web ページはすべて HTML で構築されています。つまり、HTML を学ぶことは Web 開発において必要不可欠なスキルの 1 つであると言えます。

しかし、HTML を学ぶことは初心者にとって難しいかもしれません。そこで、このチュートリアルでは、HTML をできるだけわかりやすく説明し、初心者でも簡単に学べるように努めていきます。

それではチュートリアルを始めましょう。

HTML とは何か

HTML は、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略であり、Web ページを作成するための言語です。 HTML は、Web ブラウザによって解釈され、Web ページの見た目や構造を定義することができます。

基本的な文法

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

<!DOCTYPE html>
<html>
    <head>
        <title>ページタイトル</title>
    </head>
    <body>
        <h1>見出しタグ</h1>
        <p>段落タグ</p>
    </body>
</html>

上記のコードは、HTML の基本構造を表しています。以下は、各行の説明です。

<!DOCTYPE html>: 文書が HTML の最新版で書かれていることを示す宣言です。これは一行目に書く呪文のようなものなのでそのまま覚えておきましょう。
<html>: HTML 文書の開始タグです。ここから HTML の構造が始まります。
<head>: Web ページのメタ情報を含むタグです。ここには、ページのタイトルやメタデータなどが含まれます。(ここの内容は視覚的というよりは機械的な内容です)
<title>: Web ページのタイトルを定義するタグです。このタグ内に記述した文字列が、Web ページのタブに表示されます。
<body>: Web ページの実際のコンテンツを含むタグです。ここには、テキスト、画像、ビデオ、リンクなどが含まれます。(ここの内容は視覚的なページの内容です)
<h1>: 見出しを定義するタグです。<h2>、<h3>、<h4>、<h5>、<h6>のように数字が増えることで、見出しのレベルを下げることができます。
<p>: 段落を定義するタグです。ここには、テキストを含めることができます。

HTML の要素とタグ

HTML では、要素と呼ばれるコンテンツの単位があります。例えば、<h1>や<p>は要素の例です。要素は、開始タグと終了タグで囲まれた部分で表されます。開始タグは<とタグ名、終了タグは</とタグ名、>で表されます。例えば、<h1>の開始タグは<h1>、終了タグは</h1>となります。

また、一部の要素には終了タグが不要な場合があります。例えば、改行を表す<br>や、画像を表す<img>などです。

HTML 要素の種類

HTML には様々な種類の要素があります。それぞれの要素は、Web ページの構造や見た目を定義するために使用されます。

テキスト要素

HTML におけるテキスト要素は、Web ページにテキストを表示するために使用されます。代表的なテキスト要素には、<p>、<h1>、<h2>、<h3>などがあります。

<h1>見出し1</h1>
<h2>見出し2</h2>
<p>段落のテキスト</p>

リスト要素

HTML におけるリスト要素は、順序ありリストと順序なしリストの 2 つがあります。順序ありリストは、数字やアルファベットなどの順序に従ってアイテムを表示します。順序なしリストは、アイテムをバレットやマークなどで区切って表示します。

<ol>
    <li>順序ありリストのアイテム1</li>
    <li>順序ありリストのアイテム2</li>
</ol>

<ul>
    <li>順序なしリストのアイテム1</li>
    <li>順序なしリストのアイテム2</li>
</ul>

リンク要素

HTML におけるリンク要素は、他の Web ページやファイルにリンクするために使用されます。 <a>タグを使用して、リンクの URL を指定することができます。

<a href="https://www.example.com">リンクのテキスト</a>

画像要素

HTML における画像要素は、Web ページに画像を表示するために使用されます。 <img>タグを使用して、画像ファイルの URL を指定することができます。

<img src="https://www.example.com/image.png" alt="画像の説明文" />

フォーム要素

HTML におけるフォーム要素は、Web ページからユーザーからの情報を収集するために使用されます。 <form>タグを使用して、フォームのアクションやメソッドを指定することができます。フォーム内には、テキストボックス、ラジオボタン、チェックボックス、ドロップダウンリストなどの入力フィールドを配置することができます。

<form action="submit-form.php" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" />

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

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

    <input type="submit" value="送信" />
</form>

HTML 要素のネスト

HTML 要素は、他の要素の中にネストすることができます。例えば、<p>要素の中に<strong>要素をネストすることで、太字のテキストを表示することができます。

<p>このテキストは<strong>太字</strong>になります。</p>

HTML 要素の属性

HTML 要素には、属性を追加することができます。属性は、要素の振る舞いや見た目を変更するために使用されます。例えば、<img>要素には src 属性があり、画像の URL を指定することができます。

<img src="https://www.example.com/image.png" alt="画像の説明文" />

<a>要素には href 属性があり、リンクの URL を指定することができます。

<a href="https://www.example.com">リンクのテキスト</a>

まとめ

この章では、HTML の基本的な要素について学びました。 HTML にはテキスト要素、リスト要素、リンク要素、画像要素、フォーム要素など様々な種類の要素があります。要素は、他の要素の中にネストすることができ、属性を追加することで振る舞いや見た目を変更することができます。

HTML完全入門