HTMLの基本構造を知ろう！

2020年11月15日 2024年4月1日

こんにちは！Kです！

今回はHTMLの基本的な構造について説明します。

実際にHTMLで記述するときに必要な知識になるので是非覚えておきましょう！

HTMLの基本構造

HTMLの基本構造は以下の4つで構成されています。

・DOCTYPE宣言
・html
・head
・body

実際にHTMLファイルに上記の基本構造を記述する場合は、以下の順番で記述するよう覚えておきましょう。

1. 先頭に<!DOCTYPE html>と記述する
2. <html></html>を記述する
3. htmlタグの中に<head></head>を記述する
4. htmlタグの中でheadタグの後に<body></body>を記述する

これだけだと少しわかりづらいので以下にコードを示します。

<!DOCTYPE html>   ・・・①
<html lang="ja">  ・・・②
  <head>  ・・・③
  　　・・・
　　</head>
　　
  <body>  ・・・④
　　　　・・・
　　</body>
</html>

①は、html5（バージョン）でhtml文を記述するという宣言文になります。

②は、htmlタグで囲むことで記述する文がHTMLであることを表します。

③は、headタグで囲み、Webページのタイトルやページの説明文、使用するcssファイルやJavaScriptファイルなどそのページの情報を記述します。

④は、bodyタグで囲むことで、見出しや文章などの実際にWebページに表示される中身を記述します。

この構造が基本になります。
ちなみに一つのHTML文の中にheadタグとbodyタグは一度しか出てきません。

今回はHTMLの基本構造を説明しました。

実際にWebページを一から作る場合など、この構造さえ守っていればとりあえずはブラウザに表示されるページが作成できます。

上記で説明した4つのポイントをまずは覚えましょう！

それでは、また！

Follow me!