HTMLの全体構造

岩田あきひと

目標物をつくる。
実際のHTMLファイルには、決められた型を書いていく必要がある。
html要素の中にhead要素とbody要素が必要。
<head>要素にはページに関する情報、
<body>要素には実際に表示したい内容を書きます。

HTMLバージョンを指定する
<!DOCTYPE html>の部分はDOCTYPE宣言と呼ばれるもので、
HTMLのバージョンを宣言するためのものです。
今回は最新バージョンのHTML5を使うため、<!DOCTYPE html>を使用します。
この辺りは特に気にせず、必ず記述するものだと覚えておきましょう。

<head>要素
<head>要素にはWebページの設定に関する情報を書いていきます。
<head>要素内に記述した内容はWebページには表示されません。
<head>要素には必ず入れる3つの要素がありますが、それらについては次のレッスンで学びます。

<head>要素の中では、
以下のように①文字コードの指定、②ページのタイトルの設定、③CSSの読み込みなどを行っていきます。
これらは定型文のようなものなので完全に覚える必要はありませんが、
どのようなものがあるのかを知っておきましょう。

<head>
<meta charset="utf-8">
①文字コード
<title>Progate</title>
②ページタイトル
<link rel="stylesheet" href="stylesheet.css">
③CSSの読み込み
</head>

文字コードを指定することでページの文字化けを防ぐことができます。
<meta charset="utf-8">とすることで、
そのページの文字コードをUTF-8に指定することができます。
UTF-8は、HTML5で推奨されている文字コードです。

<title>要素は、ページのタイトルを指定します。
<title>要素で指定されたタイトルは、ブラウザのタブ上に現れます。

HTMLからCSSを読み込むためには、<link rel="stylesheet">を用います。
<link rel="stylesheet" href="stylesheet.css">のように、href属性で読み込むCSSファイルを指定します。