<title>タグはHTMLページにタイトルを付けるために利用します。1ページに1つのみ記述します。各ブラウザ上でページのタイトルとして表示される役割の他、このtitleタグはSEO的に最重要で、検索エンジンに表示されるタイトルにもなります。登録されるキーワードの判断にも使われますので内容が分かるように各種検索キーワードも埋め込むようにします。文字数の制限はありませんが概ね64文字、それ以上の長さの場合は...で表示されます。

<title>タイトル</title>

<meta>

　<meta>タグはHTMLページ内の各種プロパティを設定するために利用します。文字コードの指定、表示スケール等設定します。

文字コード　<meta charset="">【必須】

　<meta charset="">でHTMLページの文字コードを指定します。詳しくはこちらでまとめています。

<meta charset="UTF-8">

表示スケール　<meta name="viewport">【必須】

　<meta name="viewport">でHTMLページの表示スケールを指定します。詳しくはこちらでまとめています。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

ページの説明　<meta name="description">【書いた方が良い】

　<meta name="description">でHTMLページの説明を記述します。元々は検索エンジンに登録される際のタイトルの説明として利用され、SEO的に重要でしたが、SEOスパムなど悪用が目立ったことから、現在では検索エンジンからは重要視されていないと言われています。文字数の制限はありませんが概ね140文字、それ以上の長さの場合は...で表示されます。

<meta name="description" content="ここにページの説明を書きます。">

ページのキーワード　<meta name="keyword">【書いた方が良い】

　<meta name="keyword">でHTMLページのキーワードを記述します。元々は検索エンジンに登録される際のキーワードとして利用され、上記descriptionと併せてSEO的に重要でしたが、SEOスパムなど悪用が目立ったことから、現在では検索エンジンからは重要視されていないと言われています。

<meta name="keyword" content="キーワード1,キーワード2">

検索エンジンに登録する/しない　<meta name="robots">【必要な場合のみ】

　<meta name="robots">は検索エンジンのクローラーに検索エンジンに登録するかしないか意志表示するものです。登録する場合は特に記述する必要はありません。詳しくはこちらでまとめています。

<!-- 検索エンジンに登録しない -->
<meta name="robots" content="noindex">

ページのジャンプ　<meta http-equiv="refresh">【必要な場合のみ】

　<meta http-equiv="">はプラグマ指示子と呼ばれHTML4.01までは<meta http-equiv="Content-Type" content="text/html;>のというMIMEタイプの記載が必須でしたが、HTML5では省略可能となりました。このためプラグマ識別子の利用するケースはジャンプページに限られます。

<!-- 10秒後にジャンプする例 -->
<meta http-equiv="refresh" content="10" URL="ジャンプ先のアドレス">

<link>

　<link>タグは外部ファイルを参照するために利用します。主にCSSファイル参照、WEBフォント参照、RSS参照、ファビコン参照に利用します。JavaScriptについては以下の<script>タグで参照しますので注意して下さい。

CSSファイル参照【必要な場合のみ】

　外部のCSSファイルを参照するために利用します。詳しくはこちらでまとめています。

<link rel='stylesheet' href="./style.css" rel="stylesheet" type="text/css" media='all'>

ファイル名の後に?～と記述するする方法

　HTMLファイルを上書きした場合に画面上で「F5」を押すことでキャッシュをクリアし最新の情報に更新しますが、この外部ファイルを上書きした場合にはWEBサーバーからデータを再読み込み「Ctrl+F5」(スーパーリロード)しないと画面が更新されません。この件「更新できていない」「Ctrl+F5」を入力して下さい。というやりとりが必ず発生してしまうのですが、これを防ぎ「F5」もしくはブラウザの再起動だけで更新できるようにする方法です。
　仕組みとしては以下の例の場合、style.cssが読み込まれ、?以降の?ver=1はクエリとして読み捨てられるのですが、ブラウザのキャッシュの仕組みではもし?以降が違う場合には同じstyle.cssでも別のファイルとして認識されキャッシュを参照することはせず、サーバーからファイルを参照します。この仕組みを利用してファイルを上書きした際に?以降も例えば?ver=2に変えておけば「F5」のみで画面が更新できるようになるというものです。
　一見「Ctrl+F5」をいちいち説明する手間が減るということで良さそうに思えますが、更新の都度?以降を変えるというのも相当な手間でどちらの方法が良いとも言えません。

<link rel='stylesheet' href="./style.css?ver=1" rel="stylesheet" type="text/css" media='all'>

複数ファイルを参照するときは順番に注意

　HTMLはインタープリタ方式であり上の行から下の行へと順番に解釈されるだけです。このため例えば2つのCSSファイルを参照する場合、上の行に書かれたCSSファイルから順番に解釈されます。CSSは同じプロパティに対して異なる値を指定した場合、後に指定された値に上書きされてしまいますのでファイルの順番に注意して下さい。

<style>

　<style>タグはCSSを外部ファイルから参照するのではなくHTMLページ内に直接記述する場合に利用します。外部ファイル方式のようにWEBサイト全体に適用するCSSではなく該当のHTMLページのみに利用したい場合に利用します。

CSSの直接記述【必要な場合のみ】

　<style>タグ内にCSSを記述します。詳しくはこちらでまとめています。

<style>
　body {
　　color:red;
　}
</style>

<script>

　<script>タグは主にJavaScript、JQueryの外部プログラムを参照するために利用します。

JavaScriptの参照【必要な場合のみ】

　外部のJavaScriptプログラムを参照するために利用します。

<script type="text/javascript" src="javascript.js"></script>

asyncとdefer

　HTML5よりページ表示を早くするために<script>タグにasyncとdefer属性が追加されました。詳しくはこちらでまとめています。