HTMLとは？書き方やタグを初心者向けにわかりやすく解説

普段、スマートフォンやパソコンで気軽に見ているWebサイト。
そのほとんどすべてのページが、「HTML」という言語を基礎にして作られていることをご存知でしょうか。

「言語」と聞くと、なんだか難しそうだと感じてしまうかもしれません。

しかし、HTMLはプログラミングの中でも特に入門しやすく、初心者の方が最初に学ぶのに最適な言語の一つなのです。
厳密に言えば、HTMLは「プログラミング言語」ではなく、「マークアップ言語」となります。

この記事では、「HTMLって一体何？」という基本的な疑問から、Webページを実際に自分の手で作成するための具体的な書き方まで、専門用語をできるだけ使わずに、初心者の方もわかるように丁寧に解説していきます。

【本記事の信頼性】

執筆者は元エンジニア
大手プログラミングスクールのWebディレクター兼ライターを経験
自らも地元密着型のプログラミングスクールを運営

忖度一切なし！
受講生から評判の良いプログラミングスクール

スクール	特徴	受講料金
RUNTEQ （ランテック）	大手比較サイトで4年連続人気NO.1！受講生からの評判も非常に高く、Web系のエンジニアを目指すならRUNTEQ一択。	550,000円（給付金適用あり）
RaiseTech （レイズテック）	月単価80万円以上の現役エンジニア講師による指導！一度入会すればサポートは半永久的。	498,000円
デイトラ	格安で質の高いWeb制作スキルを習得したい人におすすめ！業界最安級の料金でありながら、コミュニティやサポートが充実。	129,800円～
0円スクール（ゼロスク）	完全無料でプログラミングが学べる貴重なスクール！最短1ヶ月で卒業可能。ゼロスク運営会社への就職もできる。	無料
RareTECH （レアテック）	長期間に渡って学習し、希少人材を目指す人に最適なスクール！受講料は高いものの、高収入を得られる人材を目指せる。	96～132万円

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の書き方を学ぶ前に、いくつか基本的な用語を覚えておきましょう。

これらを理解しておくと、今後の学習がスムーズに進みます。

要素

「要素（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ページが完成したはずです。