【初心者向け】HTMLやコーディングで使うタグを丁寧に解説【用語】

チャッピー
チャッピー

タグって何?

こばゆた
こばゆた

HTMLのみならずプログラミング言語は基本的にタグと呼ばれるもので囲むことによって命令を出して文章や画像を表示したりすることができるんだ

きなこ
きなこ

うーん、ちょっとよくわからないよ💦

こばゆた
こばゆた

では前半でHTMLの基本であるタグを、後半からは例を出して実際にみていこう

スポンサーリンク

1.タグとは

タグ

基本的には文字列(コンテンツという)などを囲み、特定の意味付けをするもの

タグの作り方

タグには本当に多くの種類がありますが、よく出てくるものは自然に覚えられますし、知らないものはその都度調べれば良いので頑張って覚える必要はないです!

また種類によっては閉じタグ(</>)が必要ないものもあります。

こばゆた
こばゆた

閉じタグが「いる」か「いらない」かは使っていくうちに自然に覚えていきますのでこちらも頑張って覚える必要はないです!

またこのようにタグで囲って意味付けすることをマークアップするといいます。

こばゆた
こばゆた

ですので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タグについてはこちら

チャッピー
チャッピー

文章をタグで挟む事によっていろんな形になるんだね

2-1.終了タグがいらないもの

こばゆた
こばゆた

今度は終了タグが必要ないものになります

imgタグ

imgタグを使うことで画像を表示することができます。

<img src="image/....jpeg" alt="熱海の景色">

imgタグの説明

imgタグについてはこちら

inputタグ

inputタグはフォームなどで見られる入力部品をさまざまに作る事ができます。

<input type="text">

フォームについてはこちら

こばゆた
こばゆた

これらはほんの一部のタグでまだまだ多くのタグがあります

先ほども言いましたが頑張って覚える必要はなく出てきた時に使い方を調べて使えば問題ないので大丈夫です!

きなこ
きなこ

覚えなくていいのは助かるね!

3.まとめ

タグまとめ
  • タグとはコンテンツ(中身)を開始タグ(<>)と終了タグ(</>)で囲み特定の意味付けをするもの
  • それによってできたものを要素という
  • タグで囲って意味付けすることをマークアップするという
  • 要素によっては終了タグが必要ないものもある

コメント