HTMLを無料で勉強するなら、まずはProgate・ドットインストール・paizaラーニングといった日本語のサイトの無料部分で基本を学び、わからない用語はMDN Web Docs（無料）で調べる、という使い方が始めやすい方法です。英語に抵抗がなければ、W3SchoolsやCodecademyのHTML講座も無料で使えます。この記事では、2026年9月28日に各公式ページで存在と無料・有料の区分を確認できた8つのサイトだけを紹介します。
サイトごとの特徴と無料の範囲、初心者向けの選び方と進め方もあわせて解説するので、自分に合うサイトを1つ選んで始めてみてください。料金や無料の範囲は変わることがあるため、利用前に各公式サイトでも確認しましょう。
HTML勉強サイトおすすめ8選の比較表
| サイト名 | 言語 | 料金の区分（2026年9月時点） | 学び方 |
|---|---|---|---|
| Progate | 日本語 | 一部無料（無料プラン／有料のプラスプラン） | スライドで学び、ブラウザ上でコードを書く |
| ドットインストール | 日本語 | 一部無料（プレミアム会員は月額1,080円（税込）〜） | 3分以内の短い動画 |
| paizaラーニング | 日本語 | 一部無料（「新・HTML/CSS入門編」はレッスン1〜4が無料） | 動画と演習問題 |
| MDN Web Docs | 日本語（英語が原文） | 無料 | 解説を読み、練習問題で確かめる |
| Udemy | 日本語の講座あり | 有料講座が中心（無料講座もあり） | 講座ごとの動画 |
| W3Schools | 英語 | 無料（広告非表示などの有料プランあり） | 解説を読み、ブラウザ上のエディタで試す |
| Codecademy | 英語 | 「Learn HTML」は無料（修了証は有料プラン） | ブラウザ上でコードを書き、すぐにフィードバックを受ける |
| Mimo | 英語 | 無料で開始できる（有料プランあり） | スマホアプリ・Webで短いレッスン |
はじめてHTMLに触れる方は、日本語で手を動かしながら学べる上の3つ（Progate、ドットインストール、paizaラーニング）のどれか1つから始めるのがおすすめです。
無料から始められる日本語のHTML勉強サイト
Progate（プロゲート）
イラスト中心のスライドで説明を読み、そのままブラウザ上でコードを書いて結果を確認できる学習サイトです。自分のパソコンに開発環境を用意しなくても始められるので、HTMLにはじめて触れる人に向いています。
- HTML & CSSコース：全7レッスン（初級編・中級編・上級編など）
- 料金の区分：無料プランでは初歩的なレッスンの一部を学べます。すべてのレッスンを学ぶには有料のプラスプランが必要です
- こんな人におすすめ：まず手を動かしてHTMLの書き方に慣れたい人
公式サイト：Progate（HTML & CSS）
ドットインストール
1本3分以内の短い動画で学べるプログラミング学習サイトです。動画を見ながらブラウザ上でコードを書いて試せるレッスンもあり、すきま時間に少しずつ進めたい人に向いています。
- 料金の区分：無料で見られるレッスン動画があります。HTML入門の最新版（「HTML入門 基本タグ編」）などはプレミアム会員向けで、月額1,080円（税込）〜です（12か月一括払いの場合。月々払いは月額1,480円（税込））
- 無料で試すなら：トップページから、プロフィールサイトを作りながらWeb制作の流れを学ぶ「はじめてのWeb制作」の動画を無料で体験できます
- こんな人におすすめ：文章より動画で学びたい人、短い時間で区切って勉強したい人
公式サイト：ドットインストール
paizaラーニング
短い動画と演習問題がセットになった学習サイトです。動画で説明を聞いたあと、演習問題で実際にコードを書いて理解を確かめられます。
- 料金の区分：「新・HTML/CSS入門編」は、レッスン1〜4（HTMLの特徴、bodyの書き方など）が無料、レッスン5以降は有料プランです
- こんな人におすすめ：説明を聞くだけでなく、問題を解いて身についたか確かめたい人
公式サイト：paizaラーニング「新・HTML/CSS入門編」
MDN Web Docs（エムディーエヌ）
ブラウザのFirefoxを開発しているMozillaが運営する、Web技術の資料サイトです。HTMLのタグや属性の意味を調べる「辞書」としても、学習用のコースとしても使えます。学習コース「HTML によるコンテンツの構造化」では、基本の書き方からリンク、画像、表、フォームまでを順番に学べます。
- 料金の区分：無料
- こんな人におすすめ：正確な情報で学びたい人、ほかのサイトで学んだタグの意味を詳しく調べたい人
公式サイト：MDN Web Docs「HTML によるコンテンツの構造化」
有料で体系的に学べるHTML学習サイト
Udemy（ユーデミー）
さまざまな講師が作った動画講座を、講座ごとに選んで受講できるサイトです。HTMLの講座も多く、日本語の講座もあります。1つの講座で、Webサイトを1つ完成させるまでを通して学べるものもあります。
- 料金の区分：有料の講座が中心ですが、無料で受講できる講座もあります
- こんな人におすすめ：1つの講座で最初から最後まで体系的に学びたい人
- 選ぶときのポイント：講座によって内容や更新時期が違うため、講座ページで内容と最終更新日を確認しましょう
公式サイト：Udemy（HTMLの講座一覧）
英語で学べるHTML学習サイト
英語のサイトは、情報量が多く、無料で使える範囲が広いものがあります。HTMLのタグはもともと英語なので、英語の説明に慣れておくと、エラーの意味を調べるときにも役立ちます。
W3Schools（ダブリュースリースクールズ）
HTML・CSS・JavaScriptなどのチュートリアルを無料で公開している英語のサイトです。解説のあとに「Try it Yourself」ボタンがあり、ブラウザ上のエディタでコードを書き換えて結果をすぐに確認できます。アカウントを作らなくても学べます。
- 料金の区分：チュートリアルは無料。広告非表示などが使える有料プラン（PLUS）もあります
- こんな人におすすめ：例を見ながらすぐに試したい人、英語で調べる練習もしたい人
公式サイト：W3Schools HTML Tutorial
Codecademy（コードアカデミー）
ブラウザ上でコードを書き、その場でフィードバックを受けながら学ぶ英語のプログラミング学習サイトです。初心者向けの「Learn HTML」コースは、前提知識なし（Prerequisites: None）で始められます。
- 料金の区分：「Learn HTML」は無料のコースです。修了証など一部の機能は有料プラン（Plus・Pro）向けです
- こんな人におすすめ：英語で、課題を1つずつクリアしながら学びたい人
公式サイト：Codecademy「Learn HTML」
スマホでHTMLを勉強できるアプリ
Mimo（ミモ）
スマホアプリとパソコンで、同じアカウントのまま学習を続けられる英語のプログラミング学習サービスです。Web開発のコースで、HTML・CSS・JavaScriptを短いレッスンで学べます。
- 料金の区分：無料で始められます。有料プラン（Pro・Max、月払いまたは年払い）もあります
- こんな人におすすめ：通勤中などのすきま時間にスマホで復習したい人
- 注意点：英語のアプリです。スマホだけでWebページを作るのは難しいため、パソコンでの練習と組み合わせましょう
公式サイト：Mimo
HTML初心者の勉強サイトの選び方
- 日本語か英語か：はじめての人は日本語のサイトが安心です。基本に慣れたら、情報量の多い英語のサイトも使ってみましょう
- 手を動かせるか：HTMLは読むだけでは身につきません。ブラウザ上でコードを書ける、演習問題があるサイトを選びましょう
- 無料でどこまで学べるか：無料で学べる範囲はサイトによって違います。無料部分を試してから、続けたいサイトだけ有料プランを検討すると無駄がありません
- 学び方が合うか：スライド、動画、文章、アプリなど、続けやすい形式を選びましょう
いくつものサイトの入門部分をつまみ食いするより、1つのサイトの入門コースを最後までやりきる方が、基本がしっかり身につきます。
勉強サイトでHTMLを学ぶ進め方（4ステップ）
ステップ1：1つのサイトの入門コースを最後までやる
比較表から1つ選び、入門コースを最後まで進めます。わからない部分があっても止まらずに一度最後までやり、2周目で理解を深めるのがコツです。
ステップ2：自分のパソコンでHTMLファイルを作る
勉強サイトのエディタに慣れたら、自分のパソコンでファイルを作ってみましょう。テキストエディタ（Visual Studio Codeなど）で「index.html」という名前のファイルを作り、次のコードを貼り付けて保存し、ブラウザで開くと表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
</head>
<body>
<h1>自己紹介</h1>
<p>Webサイト制作を勉強しています。</p>
<h2>好きなこと</h2>
<ul>
<li>旅行</li>
<li>カフェめぐり</li>
</ul>
<p><a href="https://kredo.jp/media/">よく読むブログ</a></p>
</body>
</html>ステップ3：自分のページを1つ作る
上のコードを書き換えて、自己紹介ページや好きなお店の紹介ページなど、自分だけのページを1つ完成させます。「見出し・段落・リスト・リンク・画像・表」を一通り使うと、HTMLの基本を復習できます。
ステップ4：CSS、JavaScriptへ進む
HTMLはページの中身と構造を作る言語です。見た目を整えるにはCSS、動きを付けるにはJavaScriptを学びます。CSSの記号の意味は「CSSの記号の意味一覧」で詳しく解説しています。
無料の勉強サイトだけでHTMLは身につく？
HTMLの基本的な書き方は、無料の範囲でも十分に学べます。この記事で紹介したMDN Web DocsやW3Schoolsは無料で使え、ProgateやpaizaラーニングもHTMLの入り口部分は無料です。
多くの人がつまずくのは、サイトの課題を終えて「自分でページを作る」段階です。エラーの原因がわからない、デザインをどう組めばいいかわからない、といったときに質問できる相手がいると、学習は進めやすくなります。独学で進める場合は、エラーメッセージや用語を検索して調べる習慣をつけましょう。
本で体系的に学びたい方は「HTML・CSSの勉強におすすめの本」も参考にしてください。
英語の教材まで使えると、学べる範囲が広がる
この記事で紹介したW3SchoolsやCodecademyのように、Web制作の教材や公式ドキュメントは英語のものが豊富です。MDN Web Docsも英語が原文です。英語で読めるようになると、使える教材も、エラーを調べるときに見つかる答えも一気に増えます。
Kredo IT留学は、フィリピン・セブ島でITレッスンをすべて英語で受ける留学です。1日8時間（英語のマンツーマンレッスン4時間＋ITのグループレッスン4時間）で、英語とITを同時に学びます。公式サイトによると、受講生の92%が英語もITも未経験です（2026年9月時点の掲載）。1ヶ月のWeb Basicコースから、3.5ヶ月のWeb Developコースまであります。
「HTMLを独学で始めたけれど、英語と一緒に本格的に学びたい」と感じたら、まずは無料カウンセリングで相談してみてください。
IT留学について詳しく知りたい方は「IT留学とは？AI時代の費用・おすすめ国・選び方」をご覧ください。
HTMLの勉強サイトについてよくある質問
HTMLは無料で勉強できますか？
はい。MDN Web DocsやW3Schoolsは無料で使え、Progate・ドットインストール・paizaラーニングにも無料で学べる部分があります（2026年9月時点）。無料の範囲はサイトごとに違うため、各公式サイトで確認してください。
HTMLとCSSはどちらから勉強すればいいですか？
HTMLから始めましょう。CSSはHTMLで作った要素に見た目を指定する言語なので、HTMLの基本がわかっていると理解しやすくなります。多くの勉強サイトでも、HTMLとCSSを続けて学ぶ構成になっています。
スマホだけでHTMLを勉強できますか？
Mimoのようなアプリで、タグの意味や書き方を学ぶことはできます。ただし、自分のWebページを作って確かめる練習はパソコンの方が進めやすいため、スマホは復習用と考えるのがおすすめです。
英語のサイトは初心者でも使えますか？
HTMLのタグ名はもともと英語なので、コードの部分は英語のサイトでも読めます。説明文はブラウザの翻訳機能も使えますが、まずは日本語のサイトで基本を学んでから、英語のサイトで例を試す使い方がおすすめです。
まとめ：まずは1つのサイトの入門コースを最後までやりきろう
HTMLは、無料の勉強サイトでも基本を学べます。はじめての人はProgate・ドットインストール・paizaラーニングの無料部分から1つ選び、用語はMDN Web Docsで調べながら進めてみてください。入門コースを終えたら、自分のパソコンでページを1つ作ることが、次のステップへの近道です。
英語でIT・AIを学べるKredo
英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
