HTML入門講座 初心者が絶対に覚えておくべきHTMLタグ7選

HTMLタグには何種類ものタグが存在しています。

いろいろなサイトでHTMLタグを紹介されているかと思いますが
ここではHTMLタグを4種類に分けて紹介していきます

文字、リンク、画像、レイアウトの4種類です。

HTML入門 文字タグについて

文字タグというのは、こんな風に文字を変えたり
こんな風に文字を変えたり などをすることもできます!
基本は文字タグに、CSSでどんどん文字を塗装していきます。
CSSについては後ほど別記事で紹介します!
ここでは、文字タグにどんな種類があるのかということだけ理解して頂ければと思います

bタグ emタグ 太字と斜め文字

先ほど少し紹介したこんなやつとかこんなやつです。
bタグで太字、emタグで文字を斜めにすることができます。

emタグはあんまり使うことはないんですが、bタグは文字を太く強調したりするときに使う事があります。書き方はタグで囲むだけです

<b>太い文字</b>
<em>斜めの文字</em>

ちなみに、strongタグといってbタグと同じく文字を太くするタグがあるんですが
strongタグとbタグの違いについて知りたい方は別途記事をご覧ください!

H1~H5タグ 文章の見出し

意味:見出し

HTMLの概念として、見出しというものが存在します。
そのままの意味で、文章を書くときの見出しを設定するときに使います。HTMLを書くときの構造的には、見出し文が最初にきて、その下に文字を記載していくような形になります。

このブログの構造もそうなっています。

見出しのタグはhタグと呼ばれていてh1、h2、h3、h4、h5タグまであります。

それぞれの意味は見出しの大きさでh1タグが1番大きくて、h5タグが1番小さいです。

書き方は、そのタグで囲むだけです

<h1>見出し</h1>
<h2>中見出し</h2>
<h3>中見出し</h3>
<h4>子見出し</h4>
<h5>子見出し</h5>

h1~h5までの細かい使い分けについてなどは、別途記事でご紹介します!

pタグ 文章を書く際のタグ

意味:文章

長い文字を書くときはpタグで囲むようになります。

<p>文章文章文章</p>

改行したいときはpタグを閉じて、新しくpタグを追加して書きましょう!

<p>文章文章文章ここで改行</p>
<p>文章文章文章</p>

もしくは<br>タグを使っても改行できます!

<p>文章文章文章改行<br>
文章文章文章</p>

HTML入門 画像タグについて

imgタグ ページに画像を表示させるための仕組み

意味:画像の貼り付け

<img src=”画像URL”> といった書き方をします。

画像を貼りつけをする際にこのタグを使います。

サンプル画像

こんな感じです!

画像のURLをsrcに入れることで表示することができます。

ちなみにimgタグは閉じる必要がありません

<img src="http://kantan-web.com/wp-content/uploads/2019/04/a0960_008791-300x225.jpg">

HTML入門 リンクタグについて

aタグ クリックしたらページが移動する仕組みのタグ

意味:リンク追加

<a href="リンク先URL">

といった書き方をします。
リンクとはクリックしたらページから他のページに飛ぶことを指します
文字や画像にリンクを貼りつけることができます。
クリックしてみてね

<a href="http://kantan-web.com/">クリックしてみてね</a>

こんな感じです!
他の文字タグなどと同様に、タグの後ろに文字や画像を入れて</a>タグで閉じます。

<a href="https://www.google.co.jp/">

<img src="http://kantan-web.com/wp-content/uploads/2019/04/a0960_008791-300x225.jpg">

</a>

サンプル画像

↑猫の画像をクリックすると、googleにリンクします。

HTML入門 レイアウトタグについて

レイアウトタグは書き方が少し特殊なので、別途記事でご紹介したいと思います!
ひとまず、どのようなものかご覧頂けたらと思います。

tableタグ 表を組むためのタグ

日付 今日の勉強時間
2019年 4月1日 3時間
2019年 4月2日 5時間
2019年 4月3日 1時間
2019年 4月4日 4時間

tableタグでは、このような表を簡単に作る事ができます
エクセルを使ったことのある人なら、なんとなく想像がつくかもしれませんが
覚えれば表の組み方も多彩に変えられるので、用途に合わせたものを作り出すことができます!

リストタグ 項目をリストアップするためのタグ

  • りんご
  • バナナ
  • みかん

リストタグは、リストとして項目を上げたりする時に使います
『・』が先頭に自動で割り振られます。
今は『・』で統一されていますが、これを数式(1,2,3)や英語(A,B,C)のようにすることも可能です
CSSを覚えるとこのタグはなにかと便利がいいので
覚えとくと後々使う事が増えるかもしれません!
こちらもtableタグと併せて紹介していきたいと思います!

総括

7種類のタグを紹介しましたが、どれも基本的なもので、簡単に覚えられるかと思います!
もし分からなかった所や難しいと感じたところがあれば、分かる範囲でお答え致しますのでコメントもお待ちしています!

コメント

タイトルとURLをコピーしました