HTMLの基本の枠を作成
本章では、基本となるHTMLの枠組みを作成し、各タグが何を意味しているのかを解説していきます。
sample-siteというフォルダを作成し、その配下にindex.htmlという名前でHTMLファイルを配置しましょう。
フォルダ構成は下記のようになります。
sample-site
├── index.html
index.htmlに以下のコードを記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルサイト</title>
</head>
<body>
</body>
</html>
HTML宣言
<!DOCTYPE html>は、このファイルがHTMLであることを宣言しています。もう少し厳密に言うと、HTML5で作ったドキュメントであることを宣言する役割をしています。
htmlタグ
htmlの基点となるタグです。全てのタグは<html>から</html>の中に記載していきます。
headタグ
サイトのメタデータや外部リソースのリンクなどの情報を含むセクションです。
<head>から</head>の中には、例えば下記のような情報を記載します。
- CSSファイル、JavaScriptファイルの読み込み
- 文字コードの指定
- ページタイトル（後述の「titleタグ」の項で解説）
titleタグ
ブラウザのタブ名、ブックマーク名を指定します。
bodyタグ
ページに表示するコンテンツは<body>から</body>の中に記載していきます。
