最初に書くテンプレート
HTMLを書き始めるときに、「まずは何から書き込めばいいの？？」
最初はそれすらわかりませんよね。
HTMLには最初に書き出すテンプレがあります！
今回はそのテンプレの紹介と、それぞれの意味を解説していきます。
- 最初に書くおまじないはコレ！
- DOCTYPEについて
- htmlタグについて
- headタグの中身
- bodyタグの中身
以上の内容になります！
最初に書くおまじない
HTMLを書き出すときのテンプレートはずばりコレです！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
</body>
</html>はっきり言ってしまえば、意味はわからなくともこれを書けばOKです！
最初のうちは深く考えなくてもいいかもしれません。
DOCTYPEとは
一番上に書くのがこの
<!DOCTYPE html>という記述です。ドキュメントタイプの宣言です。
これは正確にはタグではないので、終了タグも必要ありません。
この文章はHTMLを書いてますよ、ってブラウザにお知らせする意味になります。
実はHTMLにはバージョンがあり、以前はどのバージョンなのかもここで宣言しなくてはならなかったようです。
現在はHTML5というバージョン5なのですが、<!DOCTYPE html>と書いてあげるだけでHTML5だとブラウザは認識してくれます。
htmlタグですべてを囲む
DOCTYPEの下に記述するのがhtmlタグです。
「ここからHTMLが始まりますよ～」っていうお知らせですね。
<html lang="ja">で始まり、HTMLすべての記述の最後に
</html>と書いて、タグを終了させます。
つまりすべての記述を囲んであげて、「全部HTMLです！」って宣言しているんですね。
lang=”ja”とは？
lang=”ja”のように、タグの中に入っているものを属性といいます。
このlang属性は、この文章が何語で書かれているかを表します。
今回は日本語の場合で、Japaneseの意味の”ja”と指定されています。
つまり「これから書く文章は日本語の文章です！」と宣言しているわけですね。
headタグの中は基礎設定を書く
htmlタグの次に書くのがheadタグです。
ここでは文章の中身に入る前に、この文章の基礎設定を行います。
<head>
<meta charset="UTF-8">
<title>タイトル名</title>
</head>タイトル名 と、このようにheadタグで囲まれた部分は実際のブラウザ上には表示されません。（タイトルはブラウザのタグに表示されます。）
metaタグ
meta（メタ）とは全体を俯瞰した視点のことを意味します。（メタ認知とか、聞いたことありますか？？）
つまり、全体に影響するものを宣言する際に使います。
全体に影響するものについての記述なので、終了タグが必要ありません。
今回は
<meta charset="UTF-8">
と書かれていて、これは文字のエンコードを何で行うかを指定しているのです。
少し難しい話ですが、コンピューターは文字を数値に置き換えて認識しています。
このときに、どの数値が何の文字を表すかというルールが何種類もあります。
そのひとつがUTF-8というルールで、今最も一般的に使われるルールです。
Webサイトが文字化けしてしまった経験がありませんか？？
あれはこの文字のエンコードが異なるせいで起こっているのです。
他にもmetaタグはHTML全体に影響する設定を宣言するのに使用します。
titleタグ
そのページのタイトルを書くためのタグです。
このtitleタグで書かれたタイトルが、ブラウザのタブで表示されるものになります。
アイコンなどの画像を入れることもできます。
bodyタグ内がページの内容
最後にbodyタグです。
このbodyタグで囲まれた範囲が実際にページに表示される内容です。
なので、この中では様々な他のタグを使ってコードを書くことになるのです。
見出しをつけたり、リストを作ったり、お問い合わせフォームを作ったり、画像を挿入したり。。。
タグを使いこなせれば、本当に何でも表現できます。
ここをどう記述していけるようになるかが、HTMLを書けるようになる鍵です！
