【HTML】まずはこれだけ！HTMLを書いてみよう Lv.２「タグの役割」
前回は、テキストエディタでファイルの保存、コードを書きブラウザに表示
まで行いました。
今回から、少し詳しくHTMLの書き方について触れていきます。
わかりやすく解説します。
ペルソナ
- プログラミングをこれから勉強しようとしている方
- 初めてプログラミングを書こうと思っている方
- Webページを作ってみたい方
内容
HTMLの書き方（タグの使い方）
Key Word
- タグ（開始タグ・閉じタグ）
- タグの役割（可読性）
目次
1.タグとは
・ 開始タグと閉じタグ
・ 参考（タグの役割：可読性）
２.まとめ
Contents
1.タグとは？
前回実際にテキストエディタにコードを書いてブラウザに表示をさせましたね。
そのときにタグをご紹介しました。
<h1>Hello World</h1>この<h1></h1>
がタグといわれるものです。
開始タグと閉じタグ
HTMLのタグにはそのタグで挟んだとき、そのタグが持つ役割を文章が持つようになります。
そのタグの始まりを開始タグ、終わりのタグを閉じタグと言います。
開始タグ：<h1>
閉じタグ：</h1>
お気づきかもしれませんが、閉じタグには「/」が入ります。
開始タグと閉じタグの区別はこれだけです。（簡単ですね）
ではここでh1タグの役割をご紹介します。
h１タグは見出しを作る働きがあります。
と行ってもただ字を太く、大きくするだけです。
同じく見出しを作る役割を持つタグにh2タグやh3タグがあります。
気づきましたか？実はh1タグの「h」は「Heading」という意味でまさに見出しという意味がありh1タグからh6タグまであります。数字が大きくなるにつれて文字が小さくなります。
つまりタグとは、開始タグと閉じタグで文章を挟み、その文章にタグの役割を付与するものです
参考
実はh1タグを使わなくても文字を太くしたり、文字の大きさを大きくすることはできます。
それでもh1タグを使うのは「これは見出しです」とコードを見た人に教えるためです。
大きなプログラムとなるとそのコードの量は膨大で、何千、何万行となります。
そこで重要になることが「可読性」です。
膨大なコードから必要な情報を素早くキャッチするには、
そのコードが何を表しているのかわかりやすくする必要があります。
今後、勉強するほどたくさんの書き方に出会うと思います。
そのときの状況によって書き方を変えてく必要がありますが、
タグにはそれがどんな役割を持っているのか明確にするという役目がある
ということは覚えておいてください。
今は「ふーん。そうなんだ」くらいの認識だけで大丈夫です。
h1からh６まで書いてみましょう
余談でした。
では実際にh1からh6までコードを書いてみましょう！
<h1>Hello World</h1><h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4><h5>Hello World</h5><h6>Hello World</h6>テキストエディタへの書き方、ブラウザへの表示の仕方は大丈夫ですね？
わからなくなった方は、前回のまずはこれだけ！HTMLを書いてみよう Lv.1を確認しましょう。
うまく書けたでしょうか？
一つテキストエディタの便利な機能をご紹介します。
タグを作るのに一回一回<h1></h1>とかくの面倒ですよね。
そこでh1と書いたところでtabキーを押してみてください。
感動的なことが起きますよ！
ブラウザへの表示までしてみましょう！
こんな感じになりましたか？
先ほどお伝えしたように、h1からh６と数字が大きくなるにつれて
文字が小さくなっていますね。
２.まとめ
今回のポイントは
開始タグ・閉じタグ、タグの役割についてでした！
- 開始タグと閉じタグで囲むとその文章がタグの与える役割を持つ
- タグにはそれだけで何の役割があるか一目でわかる（可読性のアップ）
ということが理解できたでしょうか？
今回はタグの役割を理解しやすいように<h1>タグについて触れました。
次回以降は他のタグにも触れながら実際のWebページを作るための予備知識を身につけていきましょう。
今回も最後までありがとうございました！！