【HTML入門 #01】最初のHTMLを書いてみよう

6/24/2025

著者: yasuzaki

カテゴリ: HTML

タグ:

アイキャッチ

今回の目標

「Hello World!」と表示する、最もシンプルなHTMLファイルを作って、
実際にブラウザで表示させてみましょう。

準備するもの

フォルダ構成

まずは、以下のようにフォルダを作成します。

cssコピーする編集する📁 my-html
└── index.html

HTMLを書いてみよう

以下のコードを index.html にコピペして保存します。

htmlコピーする編集する<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

ポイント解説

  • <!DOCTYPE html> … HTML文書の最初に書く宣言
  • <html> … HTML全体を囲むタグ
  • <head> … ページタイトルなどの設定（見えない部分）
  • <body> … 実際にブラウザに表示される部分
  • <h1> … 一番大きな見出し（今回は「Hello World!」）

表示してみよう

  1. 保存した index.html をダブルクリック
  2. ブラウザが起動し、「Hello World!」と表示されれば成功！

補足：VSCodeのLive Serverを使うと便利

VSCodeに「Live Server」拡張機能を入れると、
ファイルを保存するだけでブラウザが自動更新されます。学習がスムーズになりますよ！

よくあるつまずき

  • index.html.txt になっている → .html 拡張子に修正
  • タグを閉じ忘れている → <html> には必ず </html> を
次の記事 ＞＞