はじめに
最近、筋トレ終わりに飲む楽しみのプロテインを盛大にこぼしたJanckです。
あのー、SAVASのシェイカーって安くて洗いやすいけどちょっと力加減間違えると唇の横通り過ぎてこぼれるよね（笑）だからといって他のシェイカーに変えるような資金は無いんですけどね（笑）
飲めりゃ良いから！！シェイカーってそういうもんだから！！と自分に言い聞かせているJanckです。
さて、今回はHTMLで絶対に書かなければいけないコードについて書いていこうと思います。それではー、れっつらゴー (だせーな！)
HTMLで絶対に書かなければいけないコード
HTMLには絶対に書く骨組みのようなコードがあります。それがこちらです！
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Janckのサイト</title>
<meta name="description" content="Janckのサイトです。">
</head>
<body>
</body>
</html>
<!doctype html>
<!doctype html> (ドックタイプ宣言)はブラウザに「私は今からHTML５を使います」と伝えてくれるコードです。ちなみに「doctype」と「html」の間には半角スペースが入ります。
実はHTMLには種類があり、その種類ごとにルールが違ったりします。なので自分が使うHTMLの種類を宣言しないと後でブラウザで見た時に表示がグチャグチャになっている可能性もあります。
そんなことにならないようにしっかりと<!doctype html>を書いてHTML５を使うことをブラウザに教えてあげましょう。
<html lang="ja">～</html>
<html>～</html>はブラウザに「この中に書かれたものがHTMLです」と伝えるコードです。
そしてlang="ja"とはブラウザに「今から書く言語は日本語です」と伝えてくれるコードです。langとはlanguageの略で言語を意味します。jaはjapaneseの略で日本語を意味します。
「あれ？<html>じゃなくて<html lang="ja">じゃないの？」と思った方もいるのではないでしょうか。実は<html lang="ja">は<html>にlang="ja"を入れ込んだものなんです。
ちなみに「html」と「lang」の間には半角スペースが入ります。
<head>~</head>
<head>~</head>はブラウザに「この中に書かれたものがこのページの基本的な情報です」と伝えるコードです。
この中に書かれたものは基本的にはサイトに表示されません。ですが、サイトを制作する上では重要な情報を入れるので忘れずに書きましょう。
人間の頭の中も目には見えませんもんね。
<meta charset＝”UTF-8">
<meta charset="UTF-8">は文字化けを防ぐために必要なコードです。
文字化けとは、例えばブラウザ上に「こんにちは」と表示させたいのに「縺薙ｓ縺ｫ縺｡縺ｯ」と意味の分からない文字になってしまうことをいいます。
なぜこのコードを書くと文字化けがなくなるかという理由については少し長くなるので別の記事で書こうと思います。今回は<meta charset="UTF-8">を書くと文字化けがなくなるんだと思ってください。
<title>~</title>
<title>~</title>の中にはページのタイトルを入れます。
ここに入れたタイトルはこの場所に表示されます。
<meta name="description" content=" ">
content=" "の「" "」の中にはこのページの説明文を入れます。入れた説明文は下の画像の場所に表示されます。
といってもこのコードを入れなくてもブラウザでの表示に問題は無いんですけどね(笑)SEO対策やサイトへのクリック数を上げたいのであればここはしっかり考えて書きましょう。
ちなみに「meta」と「name」の間には半角スペースが入ります。
<body>~</body>
<body>~</body>はブラウザに「ここに書いたものを表示してください」と伝えるコードです。
ここに書いたものが実際に表示されていきます。
まとめ
今回はHTMLで絶対に書かなければならないコードについて書いてきました。できるだけシンプルにわかりやすく書こうと努力したのですがどうでしたでしょうか？
まぁ、いろいろ解説してきましたが極端な話コピペして、タイトルやページの説明だけ変えていくという形でもいいと思います。そしてHTMLの本文を<body>~</body>の中に書いていくと。
このことだけでも覚えて帰っていただければ幸いです(笑)
最後まで見ていただいてありがとうございました。
