HTMLのテンプレートって？
HTMLのテンプレートってなんぞ？って思うかもしれませんが、webページというものが構築されるにあたって絶対に必要な手順というものがあります。それを分かりやすくまとめておこうと思います。
HTMLのテンプレート
<!DOCTYPE html><!-- ブラウザに対するHTMLの宣言 -->
<html>
<head>
<meta charset="UTF-8"><!-- 文字コードの宣言 -->
<!-- レスポンシブデザインの宣言 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><!-- ここはウェブページのタイトル --></title>
<link rel="stylesheet" href="css/style.css"><!-- スタイルシート関連付け -->
</head>
<body>
<header><!-- ↓ここはヘッダー↓ -->
</header>
<m><!-- ↓ここからメインコンテンツ↓ -->
</main>
<footer><!-- ↓ここはフッター↓ -->
</footer>
</body>
</html>以上が必要な要素達です。どのページを作るにもまずはここから始まります。今ならコピペし放題！（なおVisual Studio Codeを使うと勝手にテンプレを入力してくれるショートカットキーも存在するし、終了タグまで勝手につけてくれるぞ！なんて親切なんだ！）
ちなみに、<!– –>これで囲まれているのはコメントアウトです。コメントアウトについてはこちらの記事でまとめていますので、なんぞ？って方はどうぞ。
!DOCTYPEとは
まず一番最初に書いてある!DOCTYPEとはなんぞ？って感じですね。これはDOCTYPE宣言と言って、HTMLを書き始めたらまず一番に書く決まりになってます。決まりです、ルールです。って感じで学生の時は習っていましたが、で、いざ１０年越しに作るとなると「あれ？これなんだっけ？」ってなるんですね～。この意味としては、ドキュメントが最新のHTML仕様に基づいて書かれていることを示しているというものらしいですよ。ふ～ん。なるほど、わからん。
ってことでもっと詳しく調べてみました。
DOCTYPE宣言とは
Document Type Definition（文書型定義、DTD）とは、マークアップ言語のSGMLおよびXMLにおいて、文書構造（文書型）を定義するためのスキーマ言語の一つである。
DTDでは、SGMLやXMLの文書内に記述することができる要素やその発生順序、発生回数、要素がもつ属性、属性の型などを記述することができる。
wikipediaより参照
…うん。えーっと、簡単に言うと…大運動会で何故だかさせられる「宣誓！！」ってやつですね。スポーツマンシップにのっとって我々は競争をしますよということを会場のみんなに知らしめる。それと同じで、ブラウザに「宣誓！！僕たち！私たちは！このHTMLを使って！純粋な気持ちでホームページを作ることを誓います！！」ということでしょう。ちなみにですがこれ、SEO的にもきちんとやっておいたほうがいいという情報がありました。
きっとGoogleさんもきちんと宣誓してくれる人のほうが信頼できると思うのでしょうね。運動会の決まり事なのでHTMLでの決まり事も守っていきましょう。
<html>タグとは
まず最初に<html>タグを書きます。<html>タグはルート要素（別に覚える必要はなし）と呼ばれていて、DOCTYPE宣言を除いたすべてのHTMLの親要素になります。わかりやすく言うと、ここから<html>書きますよ～っていう宣言をしていますね。これがないと始まりません。試合開始のブザーが鳴らないんですね～。これがバスケの試合ならみんな並んでずーっと向き合ってるだけですｗ
<head>タグとは
続いて、<html>の中に<head>があります。これは文字通り「頭」、人間にとって頭って大事な部分ですよね。その大事な部分をこの<head>の中に書いていきます。（小難しいことを言うと、メタデータと呼ばれるそのHTMLドキュメント自身の情報を記します。）
<head>タグの中に書くものの例
- メタデータ
- タイトル
- CSSの関連付け
となっています。
メタデータって何？
メタ情報とは、メタなデータ、すなわちデータについてのデータという意味で、あるデータが付随して持つそのデータ自身についての付加的なデータを指す。
Wikipediaより引用
…です。上の例で示したのは、
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
こういうやつでしたね。でもこういうやつがかなり大事な部分になってくるわけです。では解説しよう！
<meta charset=”UTF-8″>
このタグは、「このHTMLファイルで使用している文字コード方式は”UTF-8″ですよ」という宣言なわけです。
文字コードとは？（参考程度）
PCで文字を画面に表示するのに様々な方式があります。これを文字コード方式と言い、選択を誤ると文字化けがすごくてホラーな見た目になります。（恐怖演出としてならアリですね）
全ての文字にはIDというものが割り振られていて、それを文字コードと言います。
日本が使える文字コード形式には
Shift_JIS、EUC-JP、UTF-8などなどがあります。JISコードとかプログラミングやってた時によく使ってました～。懐かし～。HTMLならUTF-8って書いときゃ安定だと思います。
JISコードを例に貼ってみました。気になる方はここからどうぞ。
メモ帳とかでもたまにエラーが起こりがちですが、作った時の文字コードと開いた時の文字コードが違っていると文字化けドーン！！なので要注意です。
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
このタグが一体どんな内容なのかと言いますと、こちらは「レスポンシブデザインにしたいんですよ」という宣言です。
レスポンシブデザインについては説明すると長くなってしまうので、別の記事にまとめたいと思います。
が、簡単に書いておくと…HPを表示するとき、あなたなら「PC」「スマホ」「タブレット」…もしくはテレビ？一体何を使って閲覧しますか？さてここで、HPを作る側の気持ちに立ってみてください。「え？これ端末ごとにまさかページを作り直す必要があるの…？」と絶望しますよね？そんな必要はありません。それぞれの端末に合わせてHPをキレイに表示する、それがこのレスポンシブデザインなんです。結局長くなってしまった…。
HTMLとCSSを関連付けさせる
<link rel=”stylesheet” href=”css/style.css”>このタグは、HTMLとCSSを関連付けさせるための１文です。
上の図のように、HTMLとCSSをつなぐための処理です。こちらの記事で示した通りのフォルダの形↓
でデータを作成していれば、これをそのまま使ってもOKですが（cssのファイル名はstyle.cssにしてくださいね！）もしも違う場所にcssファイルを作っているよという人は、ここの部分<link rel=”stylesheet” href=”css/style.css“>が異なってきますので要注意ですよ！
指定の仕方については、相対パスと絶対パスについてもまとめているのでそちらを見てみてください。
<title>タグとは
<title>タグは、Webページのタイトルを示します。いちもんじのHPの場合は一│ichimonji presentsみたいなことになってます。これはブラウザのタブに表示されたり、ブックマークの際に名前として登録される候補に挙がったり、Googleなんかで検索したときに頻繁に表示される見出しとなったりするので、かなり重要な部分になります。もはやホームページの名前ですからね。
ちなみに<title>タグの間には他のHTMLタグを含めたりはできません。
<body>タグとは
<body>タグとは、それすなわち「体」（これ別に覚える必要ないです）。体の中にはいろんな臓器がありますよね、心臓や肺…それと同じで、この中にいろいろな要素を詰め込んでいきます。つまるところここに「本文」を書いていくんですね。
この記事で言えば記事名のタイトル（標題）から始まって今に至るまで全部です。ホームページに表示されるもの全部をこの中に書いていきます。
<header>タグとは
<header>タグとは、その名の通りにヘッダー内を加工編集するタグです。ヘッダーって何？って思いますよね。ワードやエクセルなんかにもありますよね、ヘッダー。例えば文書を作った日付を表示させたり、パワポだったらロゴを表示させたり。これは、どのページにも共通してページの上部に表示される部分だったりします。例えば…
このホームページの場合（例題としてお借りしました！ありがとうございます！！）、ページ上部のVPSをお探しの方～から、会社名のロゴ、メニュー、さらにはお申込みのボタンもヘッダーに含まれます。基本的にはページの上部にあるものがヘッダーと言っていいでしょう。
スティッキーヘッダーとは
ヘッダーには画面を下にスクロールをすると追従してくる機能を持つものもあります。それをスティッキーヘッダーと言います。スティッキーヘッダーにすると、画面を下に下げて文章を読み、さてメニューはどこだっけ？といちいち上にスクロールをする必要がなくなるわけですね。
スティッキーヘッダーにするには、基本的にjqueryと呼ばれるプログラムを使用されることが多いのですが、CSSだけでも実装が可能なようです。（ieではうまく動作しないなど色々と条件はあるので、やっぱjqueryを使うのが一番かもって意見もあります…。）
この上の例↑で行くとメニューとお申込みボタンが追従してくるので「いつでもどこでも申し込みをどうぞ！！」という強い営業色を熱意を感じますね！
<main>タグとは
<main>タグとは、そのWebページの中で中心となる、メインとなるコンテンツをまとめる為のタグです。例えば、このいちもんじのページ（この記事ですね）に関してメイン<main>がどこにあたるのかというと、HTMLのテンプレートって？っていう見出しから（つまり一番上のとこから）になります。この<main>タグは原則として１つのHTMLファイル内で１回しか使えないという制限があります。基本的に、<body>タグを書いたらつべこべ言わずに<header><main>！の流れでいいと思います。<header>と<footer>の間に書くようにしましょう。
<footer>タグとは
<footer>タグとは、フッターの中身を加工編集することができるタグです。フッターってどこのこと？って人のために説明をしておくと、先ほどのサイトで言えばここ↓のことです。
ちょっと小さくて見えないかもしれませんが、総合トップから会社概要まで全部がフッターになっています。逆に言えばそれより上がメインコンテンツ<main>なわけですね。フッターには会社についての情報やプライバシーポリシーだったりその他備考的なものをメニューとして並べることが多いです。いちもんじのサイトもプライバシーポリシーと連絡先をフッターに載せています。
ページのトップに戻るボタン
ちなみにですが、この右下のTOPと書かれたロケットのイラスト、押すと自動でページの上部に飛んでくれるのですが、コードをざっと眺めてみたところフッターには無いようでした。
このページ上部に飛ぶボタンですがJAVAscriptというプログラムを使用すると結構楽に作れるようで、フッターに配置する必要も特に無いようです。
いちもんじが見た記事内では<main>内に配置されていました。