📝

HTML 講座１基本的な書き方

2025/03/23に公開

この記事では、HTMLの基本的な書き方についてわかりやすく紹介します。

HTML 講座① 基本的な書き方

私たちがインターネットを使って記事や動画を見るとき、実は「サーバー」と呼ばれるコンピューターが、Google Chrome などのブラウザにその記事や動画のデータを送っています。
そして、ブラウザがそのデータを画面に表示してくれることで、私たちはWebページを閲覧できるのです。

※WEBシステムの仕組みについて、もっと詳しく知りたい方は、先に「WEBシステムとは？」も読んでみてくださいね！

このとき、サーバーから送られてくるのは HTMLやCSSといったルールに従って書かれたデータです。
特に、HTMLでは、見出しや文章、画像などにタグと呼ばれる目印をつけて、それぞれの役割をブラウザに伝えます。こうしたタグで囲まれた部分を要素と呼びます。

例えば、「この部分は見出し」「これは文章」といった役割を指定する場合、見出しはh1タグ、文章はpタグを使って以下のように書くことが出来ます。

※HTMLタブをクリックすると、コードを見ることが出来ます。

このように、テキスト部分をタグで囲ってあげることで、その部分が構成要素として何であるかを示すことができます。

また、HTMLでは、各構成要素のことを要素といい、要素の前につけるタグを開始タグ、後ろにつけるタグを終了タグといいます。

実際にWEBページを書く際は、以下のような形式で書く必要があります。

<!DOCTYPE html>
<html>
<head>
  <title>HTML 講座① 基本の書き方</title>
</head>
<body>
  <h1>ようこそ！</h1>
  <p>これはサンプルのWebページです。</p>
</body>
</html>

上から順に１つ１つ見ていきましょう！

<!DOCTYPE html>

こちらは、このファイルはHTMLで書かれていますよ！という宣言のようなものです。
DOCTYPEというのがドキュメントタイプ（DOCument TYPE）を指定していて、ドキュメントタイプがHTMLですという意味になります。そのままですね。

<html>
・・・
</html>

HTMLのコードは、<html> タグの中に書く必要があります。
ページを作るときは、このタグで全体を囲んであげましょう。

<head>
  <title>HTML 講座① 基本の書き方</title>
</head>

headタグにはタイトルや文字コードなどWEBページに関するデータを記載します。いわゆるメタデータというものです。

※メタデータとは、データに関する情報を意味する言葉で、「高次のデータ」とも呼ばれます。データの作成者や日時、形式、注釈などが含まれます。

<body>
  <h1>ようこそ！</h1>
  <p>これはサンプルのWebページです。</p>
</body>

bodyタグには、WEBページに表示するコンテンツを記載します。
例えば見出しや記事の内容、画像などはこのbodyタグの中に書いていきます。

それでは皆さんにも実際にHTMLを実感していただきたいので、是非CodePenを開いてコーディングを行ってみてください。

※もし、CodePenの書き方についてわからない方は、こちらの記事で説明しているので、ぜひ参照してくださいね。

下のコードをコピーして、見出しや文章の内容を自由に変えてみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>HTML 講座① 基本の書き方</title>
</head>
<body>
  <h1>ようこそ！</h1>
  <p>これはサンプルのWebページです。</p>
</body>
</html>

今回は、HTMLの基本的な書き方について学びました。
今後は、リンクや画像の挿入、リストや表など、より多くのHTMLタグを学んでいくと、Webページがさらに豊かになります！

次回もぜひお楽しみに！