ヘッド情報したい（head）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル | サイト名</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
...
</body>
</html>
headタグは、そのページの情報（メタデータ）をまとめて書く場所です。
htmlタグの直下、bodyタグの前に1つだけ置きます。
headの中身は画面に表示されません。
ページのタイトル、文字コード、読み込むCSSやJavaScript、検索エンジン向けの説明などを書きます。
文字コードやページの説明、OGPなどmetaタグで指定するものはhtml-metaにまとめています。
タイトルを指定したい（title）
<head>
<title>記事のタイトル | サイト名</title>
</head>
titleタグで、ページのタイトルを指定します。
タイトルはブラウザのタブ、ブックマーク名、検索結果の見出しに使われます。 「ページ固有の名前 | サイト名」の形にすると、どのページを見ているか分かりやすくなります。
CSSを読み込みたい（link）
<head>
<link rel="stylesheet" href="/style.css">
</head>
linkタグで、外部のCSSファイルを読み込みます。
rel="stylesheet"でスタイルシートだと伝え、hrefにファイルのパスを指定します。
ファビコン（タブのアイコン）もlinkタグで指定します。
<link rel="icon" href="/favicon.ico">
JavaScriptを読み込みたい（script）
<head>
<script src="/main.js" defer></script>
</head>
scriptタグで、外部のJavaScriptファイルを読み込みます。
headの中に書く場合はdeferを付けます。
deferがあると、HTMLの読み込みを止めずにダウンロードし、HTMLを読み終えてから実行します。