マークアップ言語とは？プログラミング言語との違いを解説！HTMLの書き方も紹介

2026年01月17日

プログラミング

web制作を学び始めた人が最初に出会う言語といえば「HTML」。
そして調べていく中で、必ず目にするのがマークアップ言語という言葉です。

「マークアップ言語って、結局どういうもの？」
「HTMLとプログラミング言語って何が違うの？」
「名前が似ているマークダウンとは別物なの？」

こうした疑問を、この記事で一つずつ丁寧に解説していきます。

HTMLの特徴から、タグの意味、web制作との関係まで、初心者でも理解しながら読み進められる構成になっています。
今まさにHTMLを触り始めた方にピッタリの内容です。

大学生がプログラミングを学ぶならGeekSalon！

受講生数1.2万人突破！満足度は95.5%
継続率約80%！同世代の仲間と学ぶから挫折しない！
大学生向けの安価な料金！

GeekSalonについて詳しく知る

マークアップ言語とは

マークアップ言語は、文章やデータの「構造」や「意味」を表現するために「タグ」を用いて記述する言語のことです。最も身近な例が、webページを作るためのHTML（HyperText MarkupLanguage）です。
HTMLでは、以下のようにページの構造をタグで表現します。

見出し→<h1>

段落→<p>

画像→<img>

リンク→<a>

このようにタグで囲むことで、ブラウザや検索エンジンが「文章の役割」を理解できるようになります。それぞれのタグについては後ほど詳しく説明します。

マークアップ言語を使うメリット

マークアップによって、次のような効果が得られます。

情報を整理され、読みやすくなる
検索エンジンに正しく伝わり、SEOにも有利
複数のサービスやデバイスで扱いやすくなる
機械が理解しやすい形に整えられる

実はマークアップはweb制作以外にも広く利用されていて、例えば以下のような分野にも活用されています。

電子書籍（EPUB→HTML/CSSベース）
ニュース記事の配信（NewsML、NITFなど→XML形式）
ECサイトの商品データ（XML/JSON形式で構造化）
ソフトウェアの設定ファイル
研究データや業務システムの情報管理

つまり、マークアップ言語とは、「情報を整理するための仕組み」と言えます。

「プログラミング言語」との違い

よく混同されるのが、HTMLのようなマークアップ言語と、JavaScript・Pythonなどのプログラミング言語です。

プログラミング言語とは？

プログラミング言語は「コンピュータに命令を出し、処理を実行させるための言語」です。

代表例：

Python
Java
JavaScript
C言語
Ruby　など

計算をする、条件で分岐する、繰り返し処理をするなどの「ロジック（処理）」を記述できます。

マークアップ言語との最大の違い

マークアップ言語は「データの構造や意味を記述する言語」であり、命令処理は行いません。

種類	目的	できること
プログラミング言語	コンピュータに命令を出す	計算・条件分岐・データ処理・アプリ作成
マークアップ言語	情報の構造を示す	見出し、段落、リンクなどの文書構造

web制作ではこの2つを組み合わせることで、見やすく、動きのあるwebサイトを作れるようになります。

プログラミング言語について詳しく知りたい方は以下を参考にしてください。

名前が似ている「マークダウン言語」との違い

近年よく使われる「マークダウン（Markdown）」もよく話題に上がりますが、こちらは別物です。

マークアップ言語

HTMLのようにタグで構造を記述
情報を細かく指定できる
web制作に必須

マークダウン言語

記号（#、-、*など）で簡易的に構造を表現
HTMLよりシンプルで書きやすい
Notion、GitHub、ChatGPTなど多くのサービスで使用

マークダウンの例：

# 見出し1
## 見出し2

- 箇条書き
- 箇条書き

実は、この記事もマークダウンで書かれています。
マークダウンは「文書作成のしやすさ」に特化しているのに対し、マークアップ言語は「情報構造の厳密な指定」に強みがあります。

マークアップ言語の種類

代表的なマークアップ言語には以下があります。

HTML：webページの構造を記述
XML：データの入れ物として利用
SGML：HTMLの元となった規格

ここからは、最も身近で、web制作を始めるなら絶対に知っておきたいHTMLについて詳しく解説します。

HTMLとは？

HTML（HyperText Markup Language）は、タグでwebページの骨組みを作る言語です。ブラウザがHTMLを読み取り、画面に文章や画像などを表示します。
webページは大きく以下の構造でできています。

<html>：HTML文書全体
<head>：タイトルやCSSなどの情報
<body>：表示される内容

HTMLの基本例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>タイトル</title>
</head>
<body>
    <h1>見出し1</h1>
    <p>段落</p>
　　<a href="https://example.com">リンク</a>
　　<img src="image.jpg" alt="画像の説明"> 
</body>
</html>

タグを入れ子状に配置することでページ全体の構造が形作られていきます。

マークアップ言語の書き方

ここまでで、マークアップ言語がどのようなものか掴めてきたでしょうか？さらに理解を深めるために、HTMLを例として記法を紹介していきたいと思います。

HTMLはタグを理解することでより使いやすくなります。代表的なタグは以下の通りです。

<html>
<head>
<body>
<h1>〜<h6>
<br>

これらの意味を理解して使うと、読みやすい構造のページが作れます。

<html>

HTMLファイルを生成する際、最初に挿入するタグです。文書の開始と終了を表します。

<head>

webページには直接反映されない内容が書かれます。タイトル、CSS、スクリプトといったメタ情報を記述します。

<body>

webページに表示されるコンテンツを書きます。見出しや段落、画像などです。

<h1>〜<h6>

見出しを生成する際に利用します。数字は見出しの大きさです。h1が最も大きく、h6が最も小さい見出しです。

<br>

文中に改行を挿入します。改行したい場所に記述することにより、文章を分割することができます。

以下の記事では、HTMLの基本を解説しています。こちらもぜひご覧ください。

マークアップ言語でできること

マークアップ言語では、次のようなことが可能です。

webサイトの作成
データを構造化
メモや文書を整理しやすくなる

ひとつずつ、詳しく見ていきましょう。

webサイトの作成

HTMLを使えば、基本的なwebページを作れます。CSSと組み合わせると美しいデザインになり、JavaScriptを加えると動きのあるサイトに成長します。

データを構造化

タグで階層や重要度を示すことで、検索エンジンやアプリケーションが内容を読み取りやすくなります。

メモを分かりやすく取れる

見出しやリストを簡単に表せるため、情報整理にも適しています。

マークアップ言語でwebサイトを作るには？

HTMLでwebサイトの骨組みを作った後は、次のように役割を追加していくことで、より高度なWebサイトを作れます。

CSS：デザイン
JavaScript：動き
Ruby：サーバー側の機能

初心者でも、HTMLを理解できれば自作サイトを作る流れがスムーズにわかるようになります。

Webサイトはこちらの記事から学べます。

マークアップ言語の勉強方法とは？

マークアップ言語を勉強する方法はいくつかあります。

動画で勉強する
Webサイトで勉強する
本で勉強する
スクールに通う

1. 動画で勉強する

前述した、HTMLやCSSはYoutubeや有料のUdemyなどの動画で勉強することができます。

Youtubeには、１時間でHTMLの基礎をマスターできる動画があります。

Udemyでは、マークアップ言語に限らず、Webサイト制作に必要不可欠である、JavaScriptなども学ぶことができます。

動画で学習するメリットとは？

動画で学習するメリットは下記のとおりです。

自分の学習スピードに合わせて動画を視聴することができる
実際の動作を視覚的に学習することができる
スキマ時間に学習することができる

動画では、自分の好きな時間、好きなタイミングでスマホ1つで勉強することが可能です。

また、実際に講師の人がコーディングしている様子を見ながら学習することができます。

初心者の方は、「本当にこの書き方で大丈夫なのか？」や「記述する場所はここで間違っていないか？」などの不安が出てきますが、動画で学習することでこのような不安を解消することができます。

動画で学習するデメリットとは？

動画で学習する際のデメリットは下記の通りです。

「分かった気」になりやすい
検索力・調査力が育ちにくい
必要な情報だけを拾いにくい
情報が古くなりやすい

スキマ時間で学習ができる反面、動画を見るだけで分かった気になってしまうことがあります。

また、動画では1から解説してくれることが多いため、自分が必要としている情報だけを拾うということが難しくなり自分で調べることが減ります。
そのため、プログラミングや、Web制作に必要な”検索力”が培われないことがデメリットになります。

さらに、マークアップ言語や、プログラミング言語はバージョンアップが激しいものです。古い動画を購入し閲覧してしまった場合、思い通りに反映されないケースがあるので注意しましょう。

動画で学習する際のポイントとは？

動画で学習する際のポイントは下記の通りです。

動画を見ながら自分でも手を動かしながら学習する
分からないと思ったことは自ら調べる癖をつける

前述した通り、動画は1から全て解説してくれることが多いです。基礎力を定着させるには動画を見るだけではなく自らの手を動かしがら学習することをお勧めします。
また、バージョン違いで反映されなかったり、分からないことがあった場合は、自分で調べる癖をつけていきましょう。

2. Webサイトで勉強する

2つ目は、Webサイトで学習をする方法です。

HTMLやCSSなどのマークアップ言語は、数多くのWebサイト上で解説されています。

おすすめのWebサイトは下記の通りです。

Progate
paiza
ドットインストール

Progate

Progateでは、HTMLとCSSを学ぶことができます。

ランディングページと呼ばれる、サイトを訪問したユーザーが一番最初に目にするWEBページを制作することができます。

WEデザインの基本知識から応用知識を身につけて、モダンなWebページを制作する過程を学習することが可能です。

paiza

paizaとは、主に ITエンジニア向けの学習・就職・スキル評価プラットフォームです。
「プログラミングを学ぶ → スキルを測る → 仕事につなげる」までを支援するサービスになっています。

paizaは、ブラウザ内にHTML・CSSを書くことができるテキストエディタが存在するため、自身のPCに環境構築をすることなく学習することができます。そのため、初心者におすすめの学習サイトです。

ドットインストール

ドットインストールは、動画中心でプログラミングを学べるサイトです。

特にHTML/CSS などの基本を短時間で学習したい初心者に人気の教材になっています。

3. 本で学習する

3つ目の学習方法として、「本で学習する」方法があります。

HTML・CSSの基礎を学べる本や、Webデザインについて学ぶことができる本があります。

画像の通り、2017年の本から最近の2025年の本など数多くの本があるのが現状です。

本で学習するメリットとは？

本で学習するメリットは下記の通りです。

体系的に理解できる
「調べる力」が自然と身につく
情報の信頼性が比較的高い
じっくり考えながら学べる

本で学習するメリットは、HTMLやCSSを基礎から順番に学べるため、全体像を体系的に理解しやすい点にあります。

また、分からない部分を自分で調べながら読み進めることで、実務や就活でも役立つ「調べる力」が自然と身につきます。
書籍は内容が整理されており、情報の信頼性が高い点も安心材料です。自分のペースで学習できるため、じっくり考えながら理解を深められるのも本ならではのメリットと言えるでしょう。

本で学習する際のデメリットとは？

本で学習する際のデメリットは下記の通りです。

コードを書いた結果がどう表示されるかイメージしにくい
HTMLやCSSの専門用語が多く、初心者はつまずきやすい
内容が古くなっている場合があり、最新の書き方とズレることがある
読むだけで満足してしまい、実際に手を動かす機会が減りがち
エラー解決など、ピンポイントの疑問をすぐ解決しづらい

本で学習する場合、コードを書いたときに画面がどのように変化するのかをイメージしにくく、特にHTMLやCSSが初めての人は理解に時間がかかることがあります。

また、専門用語が多いため途中でつまずきやすく、学習が止まってしまうケースも少なくありません。

書籍は内容が更新されにくいため、最新の書き方と異なる場合がある点にも注意が必要です。さらに、読むこと自体が目的になりやすく、実際に手を動かす機会が減ってしまう点もデメリットと言えるでしょう。

4. スクールで学習する

最後の学習方法としてスクールで学習する方法があります。

近年「プログラミングスクール」が増えてきており、低価格で受講することができるプログラミングスクールも増えてきています。

プログラミングスクールで学ぶメリットとは？

プログラミングスクールで学ぶメリットは下記の通りです。

カリキュラムが用意されており、何から学べばいいか迷わず進められる
分からない点をすぐ質問でき、つまずきにくい
学習スケジュールが決まっているため、挫折しにくい
実践課題やチーム開発を通して、実務に近い経験ができる
就活サポートやポートフォリオ作成支援が受けられる場合がある

プログラミングスクールで学ぶ最大のメリットは、学習内容があらかじめカリキュラムとして整理されており、何から始めればよいのか迷わずに学習を進められる点にあります。独学では「次に何を学ぶべきか分からない」「理解が合っているか不安になる」といった悩みが生まれがちですが、スクールではその心配を減らすことができます。分からない部分があればすぐに講師やメンターに質問できるため、つまずきを早い段階で解消しやすいのも特長です。

また、学習スケジュールがあらかじめ決められていることで、学習習慣が身につきやすく、途中で挫折しにくい点も大きな魅力と言えるでしょう。実践課題やチーム開発を通して、実務に近い形でプログラミングに取り組めるため、知識だけでなく「使えるスキル」として身につけやすくなります。

さらに、ポートフォリオの作成支援や就活対策など、将来を見据えたサポートを受けられるケースも多く、就職活動でアピールできる経験を積める点もプログラミングスクールならではのメリットです。

プログラミングスクールで学ぶデメリットは？

プログラミングスクールで学ぶデメリットは下記の通りです。

受講費用が高く、金銭的な負担が大きい
カリキュラムの進度が合わない場合がある
受け身の姿勢だと実力が身につきにくい
学べる内容が基礎中心で、応用まで踏み込めないことがある
スクール修了＝就職成功ではない

プログラミングスクールには、受講費用が高いことや、カリキュラムの進度が自分に合わない可能性があるといったデメリットがあります。

また、質問できる環境が整っていても、受け身の姿勢で学習を進めてしまうと、十分なスキルが身につかないケースも少なくありません。

さらに、スクールによっては基礎学習が中心で、応用力や自走力まで身につきにくい場合もあります。こうしたデメリットを踏まえると、単に「スクールに通うこと」自体が目的になってしまわないよう注意が必要です。

だからこそ、自分の目的やレベル、就活で何を重視したいのかを明確にした上で、カリキュラムやサポート内容をしっかり比較し、自分に合ったスクールを選ぶことが重要だと言えるでしょう。

大学生がプログラミングを学ぶならプログラミングスクール！

プログラミングスクール選びで大切なのは、「就職できるかどうか」だけでなく、大学生活と両立しながら無理なく続けられるか、そして就活で語れる経験が得られるかという点です。

特に大学生の場合、授業やアルバイト、サークル活動と並行して学ぶ必要があるため、学習ペースやサポート体制は重要な判断基準になります。そうした点を踏まえると、大学生限定で、同じ立場の仲間と学びながら実践的な経験を積めるプログラミングスクールは大きな魅力と言えるでしょう。

GeekSalonは、大学生に特化した環境の中で、基礎学習からアウトプットまでを一貫して経験できるため、「何から始めればいいか分からない」という初心者でも安心して挑戦できます。就活で活かせるスキルと経験を身につけたい大学生にとって、有力な選択肢の一つです。

GeekSalonのWebコースでは、HTML・CSSだけでなくRubyやJavaScriptなど、Web開発に必要なスキルを学ぶことができます。

毎日無料の説明会を実施していますので、ぜひご参加ください。

大学生がプログラミングを学ぶならGeekSalon！

受講生数1.2万人突破！満足度は95.5%
継続率約80%！同世代の仲間と学ぶから挫折しない！
大学生向けの安価な料金！

GeekSalonについて詳しく知る

一覧に戻る