![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
タグって何?
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
HTMLのみならずプログラミング言語は基本的にタグと呼ばれるもので囲むことによって命令を出して文章や画像を表示したりすることができるんだ
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
うーん、ちょっとよくわからないよ💦
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
では前半でHTMLの基本であるタグを、後半からは例を出して実際にみていこう
1.タグとは
基本的には文字列(コンテンツという)などを囲み、特定の意味付けをするもの
![タグの作り方](https://kbyt-programming.com/wp-content/uploads/2021/05/how_to_use_tag.png)
タグには本当に多くの種類がありますが、よく出てくるものは自然に覚えられますし、知らないものはその都度調べれば良いので頑張って覚える必要はないです!
また種類によっては閉じタグ(</>)が必要ないものもあります。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
閉じタグが「いる」か「いらない」かは使っていくうちに自然に覚えていきますのでこちらも頑張って覚える必要はないです!
またこのようにタグで囲って意味付けすることをマークアップするといいます。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
ですのでHTMLはプログラミング言語とは言わずマークアップ言語と呼びます
2.タグの種類の例
2-1.終了タグがいるもの
pタグ
pタグは段落による文章を作ります。
<p>昨日は雨だったが今日は良い天気だ</p>
昨日は雨だったが今日は良い天気だ
hタグ
hタグは見出しを作ります。
<h3>見出しです!</h3>
見出しです!
pタグと比べて少し太いことがわかります。
またhタグとpタグについてはこちらの記事に詳しくまとめてあります。
aタグ
aタグはリンクを作ります。
<a href="https://www.google.com/?hl=ja">googleへ</a>
aタグについてはこちら
ulタグ(olタグ),liタグ
ulタグは箇条書きリストや順序付きリストを作ります。
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>メロン</li>
<li>オレンジ</li>
</ul>
- りんご
- バナナ
- メロン
- オレンジ
ulタグについてはこちら
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
文章をタグで挟む事によっていろんな形になるんだね
2-1.終了タグがいらないもの
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/cb9962b18ce5bdfe4262a735a668bd70.jpg)
今度は終了タグが必要ないものになります
imgタグ
imgタグを使うことで画像を表示することができます。
<img src="image/....jpeg" alt="熱海の景色">
imgタグについてはこちら
inputタグ
inputタグはフォームなどで見られる入力部品をさまざまに作る事ができます。
<input type="text">
フォームについてはこちら
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
これらはほんの一部のタグでまだまだ多くのタグがあります
先ほども言いましたが頑張って覚える必要はなく出てきた時に使い方を調べて使えば問題ないので大丈夫です!
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
覚えなくていいのは助かるね!
3.まとめ
- タグとはコンテンツ(中身)を開始タグ(<>)と終了タグ(</>)で囲み特定の意味付けをするもの
- それによってできたものを要素という
- タグで囲って意味付けすることをマークアップするという
- 要素によっては終了タグが必要ないものもある
コメント