1. Webページはどんな構造をしているか？

Webページの構造について考える上で重要なのが，DOM(Document Object Model)というHTMLドキュメントをプログラムから利用したり操作したりする仕組みです。JavaScriptに基づいてHTML documentの構造を表現し，ファイルの特定の部分に目印を付けて，動的に書き換え，表示結果をコントロールします。

DOMは，枝分かれした木の性質をイメージするように「tree」と呼ばれる構造を持っています。その構造のことを「DOMツリー」と呼びます。実際にはHTMLドキュメントの要素をDOMツリーで表現して取り扱うイメージです。

HTMLドキュメントに書かれている要素は，DOMツリーの中では「ノード」とも呼ばれ親ノードや子ノードなどと分別されます。詳しくは以下のサイトが参考になります。

JavaScript超基礎講座！DOM操作を学ぶ | Hypertext Candy

2. HTMLタグで作る骨組み

DOMツリーを構成するオブジェクト（要素ノード）には以下のようなものがあります。

以下のタグをlab.js Builderで確認するには右端のアイコンをクリックし

Untitled

「HTML」を選ぶと見ることができます。

Untitled

<html>~</html>タグ

HTMLの文章であることを示す宣言です。lab.js Builderでは上記の方法で確認できます。

<head>~</head>タグ

主に使用する外部ファイルのリンクなどを記述しています。

<meta charset="UTF-8">

文字コードを「UTF-8」にするための指定です。これがないと文字化けしてうまく表示できない場合があります。

UTF-8 - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

<body>~</body>タグ