HTMLとは？Webサイト制作の基本となる書き方と必須タグを解説

2025年9月24日

Webサイト制作の世界に足を踏み入れると、誰もが最初に出会うのが「HTML」です。プログラミングと聞くと難しそうに感じるかもしれませんが、HTMLは厳密にはプログラミング言語ではなく、比較的シンプルなルールで構成されています。

この記事では、「HTMLとは何か？」という基本から、Webページを作成するための具体的な書き方、そしてこれだけは覚えておきたい必須タグまでを、初心者の方にも分かりやすく解説します。

そもそも「HTML」とは？

HTMLは HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページ上の文章や画像などを表示するための「マークアップ言語」です。

コンピューターのプログラムのように複雑なロジックを組むのではなく、「ここからここまでが見出しですよ」「これは段落です」「この画像を表示してください」といった**目印（タグ）をテキストに付けていき、Webページの骨格（構造）**を作っていくのが主な役割です。今あなたが見ているこのページも、すべてHTMLによってその構造が作られています。

HTMLの基本的な考え方と構造

HTMLは、<と>で囲まれた「タグ」を使って、文章の各部分に意味付けを行っていきます。多くのタグは、<p>のような開始タグと</p>のような終了タグでワンセットになっており、その間に内容を記述するのが基本ルールです。

そして、すべてのHTMLファイルは、以下のような決まった構造を持っています。

<!DOCTYPE html>
<html lang="ja">
<head>
    </head>
<body>
    </body>
</html>

<!DOCTYPE html>
- この文書が、現在主流である「HTML5」というバージョンで書かれていることを宣言するおまじないです。必ず一番上に書きます。
<html>
- <!DOCTYPE>宣言の次に位置し、HTML文書全体の範囲を示す、すべての基本となるタグです。lang="ja"は、このページが日本語で書かれていることを示します。
<head>
- ページの裏側の設定を記述する部分です。ここに書いた内容は、直接ブラウザの画面には表示されません。ページのタイトルや文字コードの指定など、重要な設定情報を含みます。
<body>
- Webページの実際に表示される内容をすべて記述する部分です。見出しや文章、画像、リンクなどは、すべてこの<body>タグの中に書いていきます。

これだけは覚えたい！Webページ作成の必須タグ

ここでは、Webページを構成する上で最低限覚えておきたい、使用頻度の高いタグをいくつかご紹介します。

見出し：`<h1>` 〜 `<h6>`

<h1>は「Heading（見出し）」を意味し、ページのタイトルやセクションの題名に使います。<h1>が最も大きな見出しで、数字が大きくなるにつれて<h2>、<h3>…と見出しのレベルが下がっていきます。ページの構造を分かりやすくするため、またSEO（検索エンジン最適化）の観点からも非常に重要なタグです。

段落：`<p>`

<p>は「Paragraph（段落）」を意味し、文章のまとまりを作る際に使います。文章をこのタグで囲むことで、テキストがひとかたまりの段落として扱われ、適切に改行されます。

リンク：`<a>`

<a>は「Anchor（アンカー）」を意味し、他のページへのリンクを作成する際に使います。hrefという属性を使って、リンク先のURLを指定するのが特徴です。

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

表：`<table>`, `<tr>`, `<td>`

<table>を使うと、Webページに表を作成できます。<table>で表全体を囲み、<tr>で行を、<td>で各セル（マス目）を作ります。

実際にHTMLファイルを書いてみよう

それでは、ここまでの内容をまとめたサンプルコードを見てみましょう。この内容をテキストエディタ（メモ帳など）にコピー＆ペーストし、「sample.html」という名前で保存してみてください。そして、保存したファイルをダブルクリックしてブラウザで開くと、作成したWebページが表示されます。

サンプルコード：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私の最初のWebページ</title>
</head>
<body>
    <h1>HTMLの基本を学ぼう</h1>
    <p>このページは、HTMLの書き方の基本を学ぶためのサンプルです。</p>

    <h2>必須タグの紹介</h2>
    <p>見出しにはhタグ、段落にはpタグを使います。</p>

    <h3>便利なリンク</h3>
    <p>
        下のリンクをクリックすると、Googleのトップページに移動します。<br>
        <a href="https://www.google.com/" target="_blank">Googleで検索する</a>
    </p>

    <h3>簡単な表の例</h3>
    <table border="1">
        <tr>
            <td>項目1</td>
            <td>データA</td>
        </tr>
        <tr>
            <td>項目2</td>
            <td>データB</td>
        </tr>
    </table>

</body>
</html>

※target="_blank"を<a>タグに追加すると、リンクが新しいタブで開くようになります。