IT世界の歩き方

Blog Post

HTMLでHello Worldを表示する方法

2026-01-30
カテゴリ：HTML/CSS
  • HTMLとは？

　HTMLとはWebページの内容と構造を定義するマークアップ言語です。

<p>タグや<a>タグなどのタグでマークアップすることで記述してブラウザにWebページを表示します。

  • HTMLのテンプレート概観

　HTMLを記述するにはテンプレートがあるのでまずはそのテンプレートについて説明します。

まずはVS Codeでindex.htmlというファイルを作成します。テンプレートの内容は以下です。

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
  • HTMLテンプレート詳細　

    HTMLテンプレートの各項目の説明を行います。

1.<!DOCTYPE html>

このタグはHTML5（最新版）の宣言を行います。

html
<!DOCTYPE html>

2.<html lang="ja">

このタグは日本語で書かれていることを宣言しています。

langがenだった場合は英語であることを意味しています。

html
<html lang="ja">

3.<head>

このタグはタイトルやメタデータを定義するタグです。タグで囲むときは後ろのタグにスラッシュ(/)をつけます。

html
<head>

</head>

4.<meta charset="UTF-8">

このタグはコードを指定します。

html
<meta charset="UTF-8">

5.<meta name="viewport" content="width=device-width, initial-scale=1.0">

このタグはスマホに対応(レスポンシブ対応)させるためのタグです。

html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

6.<title>

タイトルを定義するタグです。各自好きなタイトルに書き換えてください。

html
Document</title>

7.<body>

Webページの本文を定義するタグです。

html
<body>

</body>
  • エメット(emmet)

　このテンプレートを毎回コピペするのもいいですが面倒なので簡単に入力する方法があります。

エメット(emmet)という省略記法があり、VS Codeで ! を一つ入力するとテンプレートが自動で入力されます。ただしlangがenになってしまうのでそこはjaに修正してください。

image
image
  • Hello Worldを表示する方法

    テンプレートを入力したらbodyタグの中にHello Worldを入力してファイルを保存して開いてください。

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World
</body>
</html>

index.htmlを開くとHello Worldが表示されます。

本記事では直接テキストを書いていますが、bodyタグの中でh1タグやpタグを用いてテキストを囲むことで見出しや段落などの構造や意味を作ることができます。詳細は別の記事で解説します。

image
  • コメントアウト

　HTML上で<!-- -->で囲むことでコメントアウトといい、コード上にメモ書きすることができます。

コメントアウトした個所はブラウザに表示されず、タグも無効化されます。

html
<body>
    <!--
    コメントアウト
    この部分は表示されません。
    -->
    Hello World
</body>

<関連記事>