今回はWeb開発のためのHTML入門として、Web開発に重要なものを中心に基礎から学んでいく内容です。全4回程度を予定しております。
2026/03/03更新 サンプルの一部を変更しました
HTMLとは
HTMLはWebページを記述するための技術です。略さず書くと「HyperText Markup Language」で、ハイパーテキスト（リンクなどの機能を持てるテキスト）のためのマークアップ言語という意味になります。
マークアップ言語というのは、文章に細かくタグをつけて機能や意味を指示するための言語のことです。
細かい部分は後の段でサンプルを交えて説明します。
必要なものは？まずはメモ帳とブラウザがあればOK
学習に入る前に、HTMLの開発に必要なものを確認しておきましょう。ブラウザ
htmlファイルをWebページとして表示するのに使います。Chrome、 Firefox、 Edgeなど、普段使っているものでかまいません。
ChromeはWeb上の情報が多く調べやすいので、比較的おすすめです。
テキストエディタ
最初はWiindows標準のメモ帳などでOKです。ただしワードパッドやMS Wordなど、テキスト以外の装飾などの情報をファイルに含めるアプリはNGなのでご注意ください。プログラミングに特化したエディタを使いたい場合はVSCodeがおすすめです。詳しい説明は以下の記事にまとめています。
htmlファイルの保存のしかた
補足ですが、htmlファイルを保存する方法も押さえておきましょう。htmlファイルを保存するには、ファイルの拡張子(xxx.xxxといったファイル名の「.」の後の部分)を「html」にして保存する必要があります。
これはファイル保存ダイアログの「ファイルの種類」を「すべてのファイル」にした上で、ファイル名の後に「.html」をつけて保存することでできます。
ファイルの種類（赤枠）で「すべてのファイル」を選び、ファイル名を「xxxx.html」とする
このやり方で保存したファイルは、ダブルクリックするとブラウザが立ち上がり、Webページとして開かれます。
またエディタで編集したい場合は、エディタの上にファイルをドラッグ＆ドロップしてください。
HTMLの基本の骨組み
準備ができたところで、ここからhtmlの書き方について学んでいきましょう。まずは下のサンプルを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
</head>
<body>
<!-- ここに内容を書く -->
</body>
</html><xx>～</xx>のように<>でくくられた記号がhtmlのタグです。また、
<html lang="ja">のように、タグの中に xxx=xxx という記述がある場合、これをタグの属性と呼びます。より細かい設定をするのに必要となる場合があります。では個別のタグについて、重要なものを説明していきます。
<head>：ヘッダ記述領域
このタグの間は、このページの本文以外のメタ情報をまとめておくためのヘッダ領域です。主にページタイトルや外部ファイルのリンクなどが含まれます。
<title>：ページのタイトル
この場合のタイトルとはページ上に表示されるものではなく、ブラウザのタブなどに表示されるものです。本文ではなくメタ情報であるため、
<head>タグの間に置きます。<body>：本文の領域
このタグの間に書かれた内容が、実際にページ本文として表示されます。<!-- ～ -->：コメント
おまけですが、コメントを書くためのタグも紹介しておきます。ここはブラウザには表示されません。わかりやすいコメントを入れておくと、後で見返す時便利です。
そのほかの部分
今回は実際に手を加える事の多いタグをメインに紹介しました。他の部分は、今の段階ではおまじないとして必要と思ってもらえればOKです。簡単に説明しておくと、このファイルがhtml形式であることの宣言や、ページで使用する言語・文字コードの指定などが含まれています。
見出しの使い方
次に、本文を書くのに必要なタグです。今回は初歩として一番よく使うものをピックアップして紹介します。<h1>〜<h6>：見出し(レベル1～6)
まずは見出しです。レベルごとに6段階のタグが存在します。
<h1>が最も大きな見出しで、数字が大きくなることに下の階層の見出しになっていきます。
<h2>第１部</h2>
<h3>第１章</h3>
<h4>第１節</h4>
<h4>第２節</h4>
<h3>第２章</h3>レベル1から始めると文字が大きくなり過ぎるので2からにしました。このように、必ずレベル順に使わなければならないという訳ではありません。
上記のサンプルをブラウザ上で表示すると以下のようになります。
第１部
第１章
第１節
第２節
第２章
分かりやすい文章を書くには、適切なレベルの見出しを使う事が不可欠です。
更に読みやすくするには、CSSを利用して文字色や背景色をつけるなどの装飾をすると効果的です。今回はhtmlの講座なので、また別の機会を設けて解説します。
段落と改行の入れ方
次は本文を書くための段落分けや改行のやり方です。
<br>：改行の挿入
ここに改行を入れるよう指示するタグです。開き・閉じのセットではなく、<br>タグ1つだけで機能します。<p>：段落
複数の文からなる普通の文章のまとまりであることを示すタグです。<p>～<p>の間が一つの段落という意味になります。では、改行と段落の使用例を見てみましょう。
改行タグのテスト。１行目<br> 2行目<br>
<p>段落の表示テスト。
このタグの間の文章は一つの段落として扱われます。
テスト文章あいうえおかきくけこ
さしすせそたちつてと。</p>
改行タグのテスト。１行目
2行目
2行目
段落の表示テスト。 このタグの間の文章は一つの段落として扱われます。 テスト文章あいうえおかきくけこ さしすせそたちつてと。
表示の上では違いが分かりにくいかもしれませんが、
<p>タグ：囲った要素をブロックとして扱う <br>タグ：その場に改行が挿入されるだけという意味合いの違いがあります。
CSSを使用して細かく行間などを調整したい時、この違いが重要となります。
実習：自己紹介ページを作ってみよう
それでは、ここまで覚えたことをもとに実際にページを作ってみましょう。お題は自分のプロフィールページです。以下の作例を参考に作ってみてください。
サンプルコードと表示例
<html lang="ja">
<head>
<meta charset="utf-8">
<title>プロフィール</title>
</head>
<body>
<h2>プロフィール</h2>
<h3>基本情報</h3>
<p>ハンドルネーム：〇〇〇</p>
<p>出身地：××県</p>
<h3>趣味・目標</h3>
<h4>趣味</h4>
<p>写真を撮ること</p>
<h4>目標</h4>
<p>エンジニア転職を目指しています</p>
<h3>コメント</h3>
<p>（その他なにかあれば）</p>
</body>
</html>プロフィール
基本情報
ハンドルネーム：〇〇〇
出身地：××県
趣味・目標
趣味
写真を撮ること
目標
エンジニア転職を目指しています
コメント
（その他なにかあれば）
できたら、ブラウザで表示して確かめてみましょう。
まとめ
今回はHTMLの基本の枠組みと、一番簡単なタグまでを覚えました。次回はもう少し発展して、画像や箇条書きといった要素を扱います。
以下のリンクからご覧ください。
