HTMLとは
具体例を用いて理解する
HTMLとは、ブラウザに表示するためのマークアップ言語です。「タグ<>」というものを使って文書に構造を持たせていきます。構造を持たせる？？？イメージしにくいですよね。 これから具体例を用いて説明していきます。
htmlを書くときは、htmlファイル(拡張子が.htmlのもの)を作り、その中にいろいろ書いていきます。
(実際に手を動かす場合は最低限のHTMLファイルを作るを参考に作ってみてください。
このページは流し読み程度でokです！)
例えば、
２０２０年２月１４日の日記
今日はバレンタインデーです！
僕はチョコレートを１個ももらえませんでした。
しかし、過去に一度だけイケメンの男子からクッキーをもらったことがあります。
あの時一瞬、別の何かに目覚めそうでした。
という文書をブラウザに表示させたいとしましょう。 htmlファイルにこれを書いていきます。
２０２０年２月１４日の日記 今日はバレンタインデーです！僕はチョコレートを１個ももらえませんでした。しかし、過去に一度だけイケメンの男子からクッキーをもらったことがあります。あの時一瞬、別の何かに目覚めそうでした。
ブラウザで表示させてみると
このようになってしまいます。
つまりブラウザは、「見出しの範囲はどこか」「段落の範囲はどこか」わからないのです。
そこで我々人間がブラウザに、「見出しはここからここまでだよ！」「段落はここからここまでだよ！」と伝えていく(印をつけていく)のです。 この伝えていく(印をつける)ことを、文書に構造を持たせていく(印を付けていく)といいます。マークアップするともいいます！
ではどのように、マークアップすれば良いのか。これは最初に言ったように、タグを使っていきます。
今回の文書をマークアップをすると
<h1>２０２０年２月１４日の日記</h1> <p> 今日はバレンタインデーです！僕はチョコレートを１個ももらえませんでした。しかし過去に一度、イケメンの男子からクッキーをもらったことがあります。あの時一瞬、別の何かに目覚めそうでした。 </p>
これをブラウザで表示させてみると
このようになります。
上から順番にタグを解説していきます。
<h1>２０２０年２月１４日の日記</h1>
「２０２０年２月１４日の日記」というのを「<h1>」と「</h1>」で囲って(挟んで)います。
※後ろのタグ(終了タグ)には「/(スラッシュ)」が付くことに注意してください。
こうすることによって、ブラウザに「２０２０年２月１４日の日記は見出しだよ！」と伝えています。「h」は「heading(見出し)」の略です。
「１」というのは「１番大きな見出し」ということです。
そうです！つまり「h2」「h3」...と見出しタグがあります。そして、それらはだんだん小さくなっていくのです！
※ただし文字の大きさを変えるためにhタグを使い分けるというのはやめましょう。htmlにはセクションというものがりそれに沿ってマークアップしていかなければなりません。
セクションについてはまた別の機会に解説します。
<p> 今日はバレンタインデーです！僕はチョコレートを１個ももらえませんでした。しかし過去に一度、イケメンの男子からクッキーをもらったことがあります。あの時一瞬、別の何かに目覚めそうでした。 </p>
「<p>」と「</p>」 で囲まれている部分は、ブラウザに「これらは段落だよ」と伝えています。 「p」は「paragraph（段落）」の略です。
このようにマークアップしていきます。