doctypeと、html、head、meta、bodyタグで、完全なWebページを組み立てましょう。
このレッスンを Kodokon で開くここまでは、HTMLの断片を書いてきました。しかし、本物のWebページは必ず同じ完全な構造に従います。ちょうど、正式な手紙が必ずヘッダー、本文、署名を持つのと同じです。すべては <!DOCTYPE html> 宣言から始まります。これはいちばん最初の行に書かれ、文書が最新のHTMLを使っていることをブラウザに伝えます。これはタグではありません。単なる宣言であり、決して閉じられません。
次に来るのが <html> 要素、ページのルート（根）です。他のすべてはこの中に入ります。その lang="en" 属性は文書の言語を示します。この要素は、ちょうど2つの子要素を含みます。まず <head>。ページの身分証のようなもので、訪問者には見えない情報が入ります。次に <body>。すべての見えるコンテンツ、つまりあなたの見出し、段落、リスト、リンク、画像、表が入ります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>It contains everything I have learned.</p>
</body>
</html><head> の中身を見てみましょう。自己完結型タグ <meta charset="UTF-8"> は文字エンコーディングを指定します。これが、アクセント付き文字（é、à、ç）が正しく表示されることを保証します。<title> タグはページのタイトルを設定し、ブラウザのタブや検索結果に表示されます。viewport（ビューポート）タグとして知られる2つ目の <meta> タグもよく追加され、ページがスマートフォンの画面幅に合わせて調整されるようにします。
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>何もインストールせずに、今すぐ試すことができます。シンプルなテキストエディタ（Windowsのメモ帳、Macのテキストエディットをプレーンテキストモードで）を開き、完全な骨組みをコピーして、ファイルを .html 拡張子（たとえば index.html）で保存します。そのファイルをダブルクリックすると、ブラウザで開き、あなたの最初のページが現れます。