💡 記事の下にエディタを用意しています。壊してもOK！

更新日: 2026年5月31日

HTML h1タグの書き方｜Hello World表示の完全ガイド

📌

結論

<h1>Hello World</h1> と書けばOK

HTMLで画面にテキストを表示する方法を知りたいですか？答えはシンプルです。

📝 実際のコードはこちら

<h1>Hello World</h1>

これだけで、ブラウザに大きな見出しとしてHello Worldが表示されます。

h1タグとは？

<h1> は見出しタグの中で一番大きいものです。新聞の一面見出しのようなイメージですね。 HTMLでは、テキストをタグで囲むことで意味を持たせます。

タグ	意味	使いどころ
`<h1>`	最も重要な見出し	ページタイトル（1ページに1つ推奨）
`<h2>`	2番目の見出し	セクションの見出し
`<h3>`	3番目の見出し	サブセクション
`<p>`	段落	本文テキスト

タグの書き方ルール

HTMLのタグには開始タグと終了タグがあります。

📝 実際のコードはこちら

<h1>Hello World</h1>
 ↑開始タグ        ↑終了タグ（/が付く）

この2つでテキストを挟む、サンドイッチ方式です。終了タグの / を忘れると正しく表示されないので注意してください。

よくあるミスと対処法

ミス	原因	対処
何も表示されない	全角の＜＞を使っている	半角の`<>`に直す
タグがそのまま表示される	`</h1>`を忘れている	閉じタグを追加
見た目が変	h1をH1と書いている	動くが小文字推奨

まとめ

・HTMLはタグで囲むのが基本ルール・<h1>は最も重要な見出し。1ページに1つが推奨・開始タグと終了タグをセットで書く

演習で試してみよう

下のエディタに <h1>Hello World</h1> と入力して、実行してみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

試してみる一覧ページで解く →

■ 演習

Hello Worldと表示するHTMLを書いてください。上で学んだh1タグを使います。

詰まったらヒント

h1タグを使います。<h1>と</h1>で囲みます。

10pt

最初のHTML

Hello Worldと表示するHTMLを書いてください。上で学んだh1タグを使います。

コード

プレビュー

エラー一覧・コンソール

エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。

ロードマップ · 全解説

この演習を深掘りする

「最初のHTML」は入門レベルのHTML演習です。「Hello World」と表示するHTMLを書いてください。上で学んだh1タグを使います。この課題は、ブラウザ内エディタでその場実行でき、正誤判定も自動で行われます。

HTMLの基本は開始タグと終了タグで要素を囲むことです。h1は最も大きな見出しを表します。実務では同様のパターンがコードレビューやUI実装の現場で繰り返し登場します。

学習ロードマップ「environment」とセットで進めると、インプット→アウトプットの循環が作れます。演習#1はカテゴリ「environment」の中核スキルを固める位置づけです。

取り組み手順（ステップバイステップ）

ページ上部の解説記事を読み、「最初のHTML」のゴールを把握する
エディタのHTML欄を確認し、スターターコードから書き始める
詰まったらヒントを開き、解答例と見比べながら差分を埋める
「実行」ボタンでプレビュー／コンソールを確認し、期待どおりの表示になるかテストする
正解判定では「Hello World」「hello world」「helo world」などが含まれることを確認します。
正解後は前後の演習リンクから続けて取り組み、同カテゴリを通しで完成させる

解答コードの読み解き方

解答コードでは h1 などのHTMLタグが使われています。タグの入れ子と閉じタグの対応を確認しましょう。解説: HTMLの基本は開始タグと終了タグで要素を囲むことです。h1は最も大きな見出しを表します。ヒントの要点: h1タグを使います。<h1>と</h1>で囲みます。

実務・転職でどう活きるか

Webエンジニア・フロントエンドエンジニアの入門研修では、まず「ブラウザでHTMLが表示される」体験から始めます。本演習はその第一歩に相当し、ポートフォリオ制作やLPコーディングの前提スキルになります。

よくある間違い

ヒントを読まずに解答を見る: h1タグを使います。<h1>と</h1>で囲みます。
全角の＜＞を使ってHTMLが動かない
実行ボタンを押さずにプレビューだけ見る
ファイル保存なしでローカル開発と混同する

トラブルシューティング

実行してもプレビューが変わらない: HTMLの編集欄を触っているか確認し、実行ボタンを押したあと数秒待ってから再確認してください。
正解なのに判定が通らない: 正解判定では「Hello World」「hello world」「helo world」などが含まれることを確認します。全角スペースやtypo、タグの閉じ忘れを疑ってください。
コンソールにエラーが出る: DevToolsのConsoleタブで行番号を確認し、括弧・引用符の対応を見直します。
スマホで入力しづらい: 横画面にするか、PCブラウザで同じURLを開くと快適です。進捗はlocalStorageに保存されます。

転職・面接で話せるポイント

「最初のHTML」で扱う技術を自分の言葉で30秒説明できるようにしておく
解答コードの各行が何をしているか、面接官に白板で説明する練習をする
HTMLタグ（h1）の意味とアクセシビリティ上の注意点を説明できる
「なぜこの実装方法を選んだか」「別解はあるか」を必ず1つ用意する

用語集

HTML: HyperText Markup Language。Webページの構造を記述する言語。
ブラウザ: ChromeやSafariなど、HTMLを解釈して表示するソフト。
プレビュー: 書いたコードの実行結果を画面上で確認すること。

このページで扱うキーワード

このページは「最初のHTML」「environment」「入門」「h1」「first html」などのキーワードで検索される方に向けた、最初のHTMLの無料演習・解説です。

学習ロードマップ

学習ロードマップ →

よくある質問（FAQ）

最初のHTMLは無料ですか？

この演習は完全無料で、ブラウザだけで完結します。アカウント登録やクレジットカードは不要です。

難易度と所要時間は？

「最初のHTML」は難易度「入門」です。解説記事を読んでから取り組めば、プログラミング未経験でも30分以内に解ける設計になっています。 1問あたり5〜15分が目安です。詰まったらヒント→解答の順で確認してください。

正解後は何をすればいい？

正解したら「次の問題」リンクから続けてください。同カテゴリを一通り終えたら、学習ロードマップの次ステップへ進むのがおすすめです。

スマホでもできますか？

スマートフォンのブラウザでもエディタとプレビューは動作します。ただしコード入力はPCの方が快適です。

他の演習はどこ？

演習一覧は/learn/から。カテゴリ・難易度でフィルターできます。

「最初のHTML」で覚えるポイントは？

HTMLの基本は開始タグと終了タグで要素を囲むことです。h1は最も大きな見出しを表します。ヒント: h1タグを使います。

と

で囲みます。

環境構築カテゴリの位置づけは？

「最初のHTML」の具体的な手順は？

1. ページ上部の解説記事を読み、「最初のHTML」のゴールを把握する
2. エディタのHTML欄を確認し、スターターコードから書き始める
3. 詰まったらヒントを開き、解答例と見比べながら差分を埋める
4. 「実行」ボタンでプレビュー／コンソールを確認し、期待どおりの表示になるかテストする
5. 正解判定では「Hello World」「hello world」「helo world」などが含まれることを確認します。
6. 正解後は前後の演習リンクから続けて取り組み、同カテゴリを通しで完成させる

解答コードの読み方は？

解答コードでは h1 などのHTMLタグが使われています。タグの入れ子と閉じタグの対応を確認しましょう。

解説: HTMLの基本は開始タグと終了タグで要素を囲むことです。h1は最も大きな見出しを表します。

ヒントの要点: h1タグを使います。

と

で囲みます。

うまくいかないときは？

実行してもプレビューが変わらない → HTMLの編集欄を触っているか確認し、実行ボタンを押したあと数秒待ってから再確認してください。
正解なのに判定が通らない → 正解判定では「Hello World」「hello world」「helo world」などが含まれることを確認します。全角スペースやtypo、タグの閉じ忘れを疑ってください。
コンソールにエラーが出る → DevToolsのConsoleタブで行番号を確認し、括弧・引用符の対応を見直します。
スマホで入力しづらい → 横画面にするか、PCブラウザで同じURLを開くと快適です。進捗はlocalStorageに保存されます。

転職・ポートフォリオでどうアピールする？

「最初のHTML」で扱う技術を自分の言葉で30秒説明できるようにしておく解答コードの各行が何をしているか、面接官に白板で説明する練習をする HTMLタグ（h1）の意味とアクセシビリティ上の注意点を説明できる「なぜこの実装方法を選んだか」「別解はあるか」を必ず1つ用意する

この演習の前提知識は？

学習ロードマップの該当章を読んでおくとスムーズです。

スターターコードは変更していい？

はい。動けばOKですが、まずはスターターを理解してから差分だけ足すと学習効率が上がります。

点数（pt）の意味は？

10ptは難易度の目安です。合計点を競う必要はなく、理解度を測る指標として使ってください。

ツール一覧