普段、スマートフォンやパソコンで気軽に見ているWebサイト。
そのほとんどすべてのページが、「HTML」という言語を基礎にして作られていることをご存知でしょうか。
「言語」と聞くと、なんだか難しそうだと感じてしまうかもしれません。
しかし、HTMLはプログラミングの中でも特に入門しやすく、初心者の方が最初に学ぶのに最適な言語の一つなのです。
厳密に言えば、HTMLは「プログラミング言語」ではなく、「マークアップ言語」となります。
この記事では、「HTMLって一体何？」という基本的な疑問から、Webページを実際に自分の手で作成するための具体的な書き方まで、専門用語をできるだけ使わずに、初心者の方もわかるように丁寧に解説していきます。
 |
|
HTMLとは何か？
まずは、HTMLがどのようなもので、Webの世界でどんな役割を果たしているのか、その概要をわかりやすく説明していきます。
HTMLはWebサイトの骨格を作るマークアップ言語
HTMLは「HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）」の略称です。
Webページに表示される文章や見出し、画像といったさまざまな部品が、ページの中でどのような役割を持つのかを定義するための「マークアップ言語」に分類されます。
Webページを一つの「家」に例えると、その役割が非常に分かりやすくなります。
- HTML：柱や壁、屋根といった、家の「骨格・構造」を組み立てる役割。
- CSS：壁紙の色を決めたり、家具を配置したりする、見た目の「デザイン・装飾」の役割。
- JavaScript：照明をつけたり、自動ドアを開けたりする、「動き・機能」を追加する役割。
このように、HTMLはWebページに表示されるコンテンツの土台となる構造を作る、最も基本的な部分を担っています。
HTMLがなければ、Webページはその形を保つことすらできません。
ブラウザや検索エンジンは、このHTMLで書かれた構造を読み取ることで、ページの内容を正しく理解しているのです。
HTMLの種類
HTMLには歴史があり、いくつかのバージョンが存在します。
昔は「HTML4」や「XHTML」といったバージョンが使われていましたが、2025年現在、私たちが学ぶべきなのは「HTML5」と、その後継にあたる「HTML Living Standard」という最新の規格です。
HTML Living Standardは、特定のバージョン番号を持たず、時代に合わせて常に更新され続ける「生きている標準」です。
しかし、初心者の方が学習を始めるにあたって、これらの細かい違いを気にする必要はまったくありません。
まずは「現在主流のモダンなHTMLの書き方を学ぶ」という意識を持っていれば十分です。
この記事で紹介する書き方も、すべて現在の標準に基づいたものなので、安心してください。
HTMLとCSSの関係
HTMLとCSSは、Webサイト制作において常にセットで使われる、切っても切れない関係です。
それぞれの役割分担を改めて確認しておきましょう。
HTMLの役割は、前述の通り「構造の定義」です。
例えば、「このテキストは重要な見出しです」と<h1>タグで示したり、「ここは箇条書きのリストです」と<ul>タグで示したりします。
しかし、HTMLだけでは、文字の大きさや色、配置といった見た目に関する指定をすることはできません。
そこで登場するのがCSS（Cascading Style Sheets）です。
CSSは、HTMLによって作られた構造に対して、「<h1>タグで示された見出しの文字は、青色で大きく表示してください」といった、デザインに関する指示を与える専門の言語です。
HTMLからデザインの指定を分離することで、ページの構造と見た目を別々に管理でき、効率的なWeb制作が可能になります。
HTMLとJavaScriptの関係
HTMLとCSSがページの「静的」な部分を担うのに対し、「動的」な機能を追加するのがJavaScriptの役割です。
HTMLとCSSだけでは、基本的に一度表示されたページの内容がユーザーの操作によって変化することはありません。
しかしJavaScriptを使うと、Webページに以下のような「動き」や「機能」を実装できます。
- ボタンをクリックすると、隠れていたメニューが表示される。
- 画像のギャラリーで、左右の矢印をクリックすると画像が切り替わる。
- お問い合わせフォームで、入力内容に間違いがあるとエラーメッセージを表示する。
JavaScriptは、HTMLが作ったページの骨格を、ユーザーのアクションに応じて操作したり、書き換えたりすることができます。
HTMLで構造を作り、CSSでデザインを整え、JavaScriptで動きをつける。
この3つの言語が、現代のWebサイトを支える基本技術なのです。
HTMLで使われる基本的な用語
HTMLの書き方を学ぶ前に、いくつか基本的な用語を覚えておきましょう。
これらを理解しておくと、今後の学習がスムーズに進みます。
タグ
HTMLの最も基本的な構成要素が「タグ」です。
これは、<と>という記号で囲まれた、特定の意味を持つキーワードのことを指します。
例えば、<p>は段落を、<h1>は見出しを表すタグです。
ほとんどのタグは、<p>のような「開始タグ」と、スラッシュが入った</p>のような「終了タグ」の2つで一対になっています。
この開始タグと終了タグでコンテンツを挟むことで、その部分に特定の意味を与えるのです。
要素
「要素（Element）」とは、開始タグ、終了タグ、そしてその間に挟まれたコンテンツ全体を指す言葉です。
例えば、<p>こんにちは</p>という記述があった場合、この全体が一つの「p要素」となります。
Webページは、このような様々な要素が組み合わさって、一つの大きな構造を形成しています。
なお、<img>タグのように、終了タグを持たない「空要素」と呼ばれるものも一部存在します。
属性
「属性（Attribute）」は、タグに追加の情報を与えるためのものです。
属性は、開始タグの中に属性名="値"という形式で記述します。
例えば、リンクを作る<a>タグを考えてみましょう。
<a href="https://www.google.com">Googleへのリンク</a>
この例では、<a>タグにhrefという属性が追加されています。
href属性は、リンクの飛び先となるURLを指定する役割を持っています。
このように、属性を使うことで、タグの基本的な機能に、さらに詳細な設定を付け加えることが可能になります。
HTMLを書くために必要なものは2つ
HTMLでWebページを作り始めるのに、高価な専門ソフトや特別な機材は一切必要ありません。
ほとんどのパソコンに最初から入っている、たった2つのツールがあれば十分です。
テキストエディタ
テキストエディタは、HTMLのコードを記述するためのソフトウェアです。
基本的には文字が入力できれば何でもよく、Windowsに標準で付属している「メモ帳」や、Macの「テキストエディット」でもHTMLを書くことは可能です。
しかし、より快適にコーディングを進めるためには、プログラミング用に開発されたテキストエディタの利用を強くおすすめします。
中でも「Visual Studio Code (VSCode)」は、世界中の多くの開発者に利用されている無料で高機能なエディタです。
タグを色分けして見やすくしてくれたり、入力候補を表示してくれたりする機能があり、初心者の学習を力強くサポートしてくれるでしょう。
Webブラウザ
Webブラウザは、HTMLコードを解釈し、人間が見ることのできるWebページとして表示（レンダリング）するためのソフトウェアです。
普段インターネットを閲覧する際に使っているもので問題ありません。
代表的なブラウザには、以下のようなものがあります。
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
作成したHTMLファイルをこれらのブラウザで開くことで、自分の書いたコードが正しく表示されるかを確認します。
テキストエディタでコードを書き、ブラウザで表示を確認する。
この繰り返しが、Web制作の基本的な流れとなります。
HTMLでよく使われるタグ一覧
HTMLには100種類以上のタグが存在しますが、最初からすべてを覚える必要はありません。
まずは、Webページを作成する上で頻繁に使われる、以下の基本的なタグの役割を覚えれば、簡単なページの構造は十分に作れるようになります。
| カテゴリ | タグ名 | 意味・役割 |
|---|---|---|
| 基本構造 | <html> |
HTML文書全体を囲む、最も外側のタグ。 |
<head> |
ページのタイトルや文字コードなど、ブラウザに伝える裏方の情報を記述する部分。 | |
<body> |
実際にブラウザの画面に表示される、コンテンツ本体を記述する部分。 | |
<title> |
ブラウザのタブに表示されるページのタイトルを定義する。 | |
<meta> |
文字コードの指定など、ページのメタデータ（付加情報）を定義する。 | |
| 見出し・段落 | <h1>〜<h6> |
見出しを定義する。<h1>が最上位の大見出しで、数字が大きくなるほど下位の見出しになる。 |
<p> |
段落（Paragraph）を定義する。文章のひとまとまりを示す。 | |
| テキスト装飾 | <strong> |
テキストの重要性が高いことを示す（通常は太字で表示される）。 |
<em> |
テキストを強調する（通常は斜体で表示される）。 | |
<br> |
改行（Break）を挿入する。 | |
| リンク・画像 | <a> |
ハイパーリンク（Anchor）を作成する。href属性でリンク先のURLを指定する。 |
<img> |
画像（Image）を埋め込む。src属性で画像ファイルの場所を、alt属性で代替テキストを指定する。 |
|
| リスト | <ul> |
順序のないリスト（Unordered List）。いわゆる箇条書きリストを作成する。 |
<ol> |
順序のあるリスト（Ordered List）。番号付きのリストを作成する。 | |
<li> |
リストの各項目（List Item）。<ul>や<ol>の中で使う。 |
|
| グループ化 | <div> |
特に意味を持たないブロックレベルの箱（Division）。複数の要素をグループ化し、CSSでデザインを適用する際によく使う。 |
<span> |
特に意味を持たないインラインの範囲（Span）。文章の一部分だけをグループ化する際に使う。 | |
| テーブル | <table> |
表を作成する。 |
<tr> |
表の行（Table Row）を定義する。 | |
<th> |
表の見出しセル（Table Header）を定義する。 | |
<td> |
表のデータセル（Table Data）を定義する。 |
初心者でもわかる！HTMLの書き方
それでは、実際にHTMLファイルを作成してブラウザに表示するまでの一連の流れを、ステップ形式で詳しく紹介していきます。
ステップ1：作業用フォルダの作成
まず、パソコンのデスクトップなど、わかりやすい場所に新しいフォルダを一つ作成してください。
フォルダ名は「html_practice」など、自由につけて構いません。
これから作成するHTMLファイルや画像ファイルは、すべてこのフォルダの中に保存していくことで、管理がしやすくなります。
ステップ2：テキストエディタでファイルを作成する
次に、Visual Studio Codeなどのテキストエディタを起動し、新しいファイルを作成します。
まだ何も書かれていない、まっさらなページが表示されればOKです。
ステップ3：HTMLの基本構造（テンプレート）を記述する
すべてのHTMLファイルの基礎となる、お決まりのテンプレートを記述します。
最初は呪文のように見えるかもしれませんが、これは「こういうものだ」と覚えて、コピー＆ペーストしてしまっても構いません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにページのタイトルを書きます</title>
</head>
<body>
<!-- ここにページに表示したい内容を書いていきます -->
</body>
</html>それぞれの部分が持つ意味は以下の通りです。
<!DOCTYPE html>: この文書がHTML5の規格で書かれていることを宣言する、おまじないのようなものです。<html lang="ja">: HTML文書全体の始まりと終わりを示します。lang="ja"は、このページが日本語で書かれていることを示します。<head>: ページのタイトルや文字コードの指定など、ブラウザに対する設定情報や裏方の情報を記述する部分です。ここに書いた内容は、直接ページには表示されません。<body>: 実際にブラウザの画面に表示される、見出しや文章、画像といったすべてのコンテンツを記述する部分です。
ステップ4：ファイルを保存する
上記のコードを記述したら、ファイルを保存します。
ここで最も重要なのが、ファイル名の末尾に必ず「.html」という拡張子を付けることです。
ファイル名は「index.html」とするのが一般的です。
先ほど作成した「html_practice」フォルダの中に保存してください。
ステップ5：ブラウザで表示を確認する
保存した「index.html」ファイルをダブルクリックするか、ブラウザのウィンドウにドラッグ＆ドロップしてみてください。
すると、ブラウザが起動し、自分が書いたHTMLが表示されます。
まだ<body>の中は空なので、ページは真っ白ですが、ブラウザのタブに<title>で指定したタイトルが表示されているはずです。
これで、Webページを作成する準備が整いました。
HTMLを実際に書いてみよう【サンプルコード付き】
基本の流れがわかったところで、実際にコンテンツを持つ簡単な自己紹介ページを作成してみましょう。
以下のコードを、先ほど作成したindex.htmlファイルに貼り付けて、上書き保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>山田太郎の自己紹介</title>
</head>
<body>
<h1>山田 太郎</h1>
<p>Web制作を勉強中の初心者です。HTMLとCSSを使って、素敵なサイトを作れるようになるのが目標です。</p>
<h2>私の好きなこと</h2>
<ul>
<li>読書</li>
<li>映画鑑賞</li>
<li>散歩</li>
</ul>
<p>
詳しいプロフィールは、<a href="https://example.com">こちらのサイト</a>をご覧ください。
</p>
</body>
</html>
なお、ファイルを保存する際は、必ず「文字コード」を「UTF-8」にしてください。
「Shift_JIS」などの文字コードになっていると、文字化けを起こしてしまいます。
ファイルを上書き保存したら、ブラウザの表示を更新（リロード）してみてください。
見出しや段落、箇条書きリスト、そしてリンクが表示された、立派なWebページが完成したはずです。
<h1>タグで、ページの大見出しとなる自分の名前を表示しています。<p>タグで、自己紹介の文章を段落として記述しています。<h2>タグで、中見出しを作り、<ul>と<li>タグを使って好きなことを箇条書きリストにしています。<a>タグを使い、「こちらのサイト」というテキストに、外部サイトへのリンクを設定しています。
このように、意味に応じたタグを適切に使い分けることで、ページの構造を組み立てていくのがHTMLの基本的な書き方なのです。
初心者がHTMLの基礎や書き方を効率的に学ぶには
HTMLの基礎や書き方、CSS、WordPressなどに関するスキルを高めたい場合は、「WPHack講座」がおすすめです。
WPHack講座のメリットは、主に以下の通りです。
格安料金でHTMLを中心としたスキルを高めたい場合には最適なので、「月数千円の出費で効率的にスキルを身に付けられる」という点にメリットを感じる方は、「WPHack講座」の利用を検討してみてもいいかもしれません。
実務未経験エンジニアでも希望の転職先を見つけやすい！！
週1～3日からできる副業案件多数！！
フリーランス案件の単価の高さは圧倒的！！
