実際にタグを書きながら、HTMLの基本構造にいて学んでいきましょう。
HTML文書と基本構造
index.htmlを作ろう
HTML学習の用意②制作するサイトの準備で作成した「edbase」フォルダの中に、Webページとして使用するファイルを作ります。
空のファイル index.htmlを作成してください。
index.htmlとは
index.htmlの、拡張子（.html）はHTML文書であることを示しています。
ファイル名である“index”は、デフォルトファイル（デフォルトドキュメント）として使えるよう決められているファイル名。デフォルトファイルとは、ファイル名が省略されたURLにアクセスされた時に、表示されるファイルを指します。
ブラウザでhttps://skillhub.jp/などのURLを開くと、トップページが表示されます。
これはデフォルトファイルが自動的に表示されているためです。
この仕組みから、サイトのトップページはindex.htmlで作成します。
HTMLの基本構造
作成したindex.htmlを使って、HTML文書の基本構造を書いてみましょう。
エディタでindex.htmlを開いてください。 空っぽのファイルに、HTMLページに最低限必要なタグを書いていきます。
<!DOCTYPE html>と<html><head><body>とその終了タグ、合計７個のタグを下記の順番で入力してみてください。
字下げはTabキーを使います。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
最初の<!DOCTYPE html>はこのファイルはhtmlです、と宣言しています。
<html>～</html>は「この中がHTMLでマークアップされている」ことを意味します。
ですので、実際のページの中身は、大きく以下２パートに分かれているイメージです。
- head要素
- body要素
head要素とbody要素
head要素にはWebページのタイトルや説明など、Webサイトを開いた時には表示されない機械向けの情報が主に入ります。
body要素は、Webサイトを開いて目に見えている部分（文字や画像など）が主に入ります。
それぞれ、作成するページによって書くことは変わります。 次のレッスンではindex.htmlのhead要素を作っていきます。