どうもこんばんは、ロムです
前回に続いてHTMLの初級編をレクチャーしていきます！
この記事は以下の方にオススメです
・HTMLをこれから勉強しようとしている人
・勉強したいけど有料講座とか通いたくない人
・たまにHTML使っているけど詳しいことはわからない人
この記事を書いてる僕についてざっくり自己紹介するよ！！
・某政府系企業や政府系の基幹システムをSIerとして数年間開発
・その後転職し、社内のシステム管理者としていろいろ開発
・だいたい使ったことあるのはHTML、VBA、python、Java、C#など
この記事を読むとこんなことがわかります！
・HTMLのかなりざっくりした基本構造がわかります
・<head>タグと<body>タグの使い分けがわかります
・HTML書くときに必須のタグの概要がなんとなくわかります
今回は<head>タグと<body>タグを勉強するんだね！
これって何に使うの？？
これからHTMLに親しみを持ってもらうために、大まかなHTMLの構造を説明したいんだ！
例えば魚を捌(さば)くにも魚の身体を理解した方がいいように、HTMLを理解するには大まかにHTMLの構造を理解してもらいたい！
それで最初は<head>タグと<body>タグなんだ！
早速やっていきましょう！
HTMLは<head>タグと<body>タグで大別される
突然ですが、HTMLはプログラミング界隈では実はかなり簡単なほうです
プログラミングを始める人が最初にHTMLに手を出すのもそれが理由だと思います
それについて僕は以下が原因だと思っています
- HTMLはプログラムコードの構造がとても分かりやすい
- HTMLは覚えるべきもの（タグの種類）が少ない
※以下で詳しく解説するよ！
新卒の時、僕がHTMLってナニ？って段階から、業務でいきなりHTMLの仕事振られたんだけど、「一日で覚えられるよ！簡単だから！」って上司に言われました
ほんとに1日でできたの？？
無理でした…
僕にものを教えるときはしっかりべったり張り付いて、二人三脚で優しく丁寧に教えてくれないとねェ
（なんでコイツこんな偉そうなんだろう…）
①HTMLはプログラムコードの構造がとても分かりやすい
<head>タグと<body>タグについて
HTMLは大きく分けて<head>タグと<body>タグとで成り立っています
しかもこれ、初心者がプログラムコードを見ても一発で区別が出来るようになっています！
実際にHTMLコードを見てみよう！
まだコードの書き方は教えていないから、この章は眺めてるだけにしよう！
上画像の赤枠では前回に勉強した<h1>タグが使用されていますね！
実際にブラウザで表示されると<h1>で囲った文字が大きく表示されましたが、今回も同じように「これはサンプルです」の文字が大きく表示されています
そして赤枠の先頭には<body>タグと書かれてるのが分かるでしょうか？
では青枠はサイトにどのように表示されているかわかりますか？？
青枠のところは…ごちゃごちゃしてるね…
でもサイトにはどこが反映されてるのか分からないなぁ
実はこの青枠は直接はサイトに反映されていません！
そして青枠には先頭に<head>と記載されているのがわかると思います
<head>には「こうゆう感じでHTML表示してくよ！」というオプションのようなものが書いてあると思ってください！
そしてHTMLコードは必ず<head>は上に、<body>は下にあります。
さながら人間みたいですね！
早く人間になりた～～い！そんでHTMLかきた～～い！
やかましい！
<head>タグと<body>タグの役割について
なんでタグが分かれてるの？？と疑問に思われたアナタ！
いい質問ですねぇ～～
<head>は表示するときのオプションです
なのでサイトページをクリックしたとき、一番最初に読み込まれるのがこの<head>タグに囲まれた部分です
サイトを見るとき、やたら表示に時間がかかるサイトと一瞬で表示されるサイトがあることに気づきませんか？？
表示に時間がかかるサイトは<head>タグにいろいろたくさん書かれてて、オプション設定に時間がかかっているからかもしれないね！！
まずは試しにタウンワークのホームページの<head>タグを見てみましょう
F12キーでHTMLを見てみましょう！(スマホの方は帰ったらPCで見てくださいね)
特段サイト表示が遅いわけではないですが、<head>タグはこんなにたくさん！
逆にページが一瞬で表示されることで有名な(俳優の)阿部寛さんのホームページを見てみましょう！
http://abehiroshi.la.coocan.jp/
タウンワークよりも阿部寛さんのホームページは体感早く感じませんか？？
F12キーでHTMLを見てみましょう！<head>タグがすごくすっきりしてますね！
このように<head>タグはサイトの表示に関するオプションを決めているところだと覚えておいてください！
②HTMLは覚えるべきもの（タグの種類）が少ない
前章では<head>タグと<body>タグの説明をしました
まだ説明していませんでしたが、HTMLはいくつものタグという部品で成り立っています
これについては次回説明します！
おわり
